How to include icon fonts in plugin.

Hii All,

I want to use "Font Awesome Icons" in my plugin.Can you please tell me where to copy the iconfont files(ttf,woff,eot) in my plugin. & how to call that files in css.

I tried the same by putting all those font files inside font folder & putting the font folder in CSS folder

but it is throwing foll error.

GET http://localhost:1990/confluence/s/en_GB-1988229788/4732/NOCACHE1/2…es/myPlugin:icon-editor/fonts/fontawesome-webfont.woff?v=4.0.3404 (Not Found):1990/confluence/s/en_GB-1988229788/4732/NOCACHE1/2.0.1/_/download/resources/myPlugin:icon-editor/fonts/fontawesome-webfont.woff?v=4.0.3:

Thanks.

1 answer

1 accepted

9 votes
Answer accepted
David Simpson Community Champion Jul 03, 2014

The following worked successfully for me...maybe I should write a blogpost ;)

My font awesome resources are stored as so:

/resources/my-theme/assets/font-awesome/css/font-awesome.css
/resources/my-theme/assets/font-awesome/fonts/fontawesome*

In atlassian-plugin.xml they are in a single web resource module

<web-resource key="font-awesome-resource" name="Font Awesome Resources">
    <!-- All "name" attributes in the "root" directory - see directory rewrite bug: https://ecosystem.atlassian.net/browse/PLUG-854 -->
    <resource name="font-awesome.css"     type="download" location="my-theme/assets/font-awesome/css/font-awesome.css" />
    <!-- All font files with separate open/close tags - this *may* help with unusual mime-types -->
    <resource name="FontAwesome.otf"      type="download" location="my-theme/assets/font-awesome/fonts/FontAwesome.otf"></resource>
    <resource name="fontawesome-webfont.eot"  type="download" location="my-theme/assets/font-awesome/fonts/fontawesome-webfont.eot"></resource>
    <resource name="fontawesome-webfont.svg"  type="download" location="my-theme/assets/font-awesome/fonts/fontawesome-webfont.svg"></resource>
    <resource name="fontawesome-webfont.ttf"  type="download" location="my-theme/assets/font-awesome/fonts/fontawesome-webfont.ttf"></resource>
    <resource name="fontawesome-webfont.woff" type="download" location="my-theme/assets/font-awesome/fonts/fontawesome-webfont.woff"></resource>
</web-resource>

Aside: Issue PLUG-854 will bite you in the ass if you're not careful.

In font-awesome.css, fonts are references as though they are in the same directory as the CSS eg.

@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.0.3');
  ...
}

Build the plugin and compare the src & target fonts:

dvdsmpsn:my-theme davidsimpson$ ls -la src/main/resources/my-theme/assets/font-awesome/fonts/
total 888
drwxr-xr-x@ 8 davidsimpson  staff     272 12 Dec 13:53 .
drwxr-xr-x  6 davidsimpson  staff     204 26 Nov 00:13 ..
-rwxr-xr-x@ 1 davidsimpson  staff   62856  5 Nov 04:35 FontAwesome.otf
-rwxr-xr-x@ 1 davidsimpson  staff   38205  5 Nov 04:35 fontawesome-webfont.eot
-rwxr-xr-x@ 1 davidsimpson  staff  202148  5 Nov 04:35 fontawesome-webfont.svg
-rwxr-xr-x@ 1 davidsimpson  staff   80652  5 Nov 04:35 fontawesome-webfont.ttf
-rwxr-xr-x@ 1 davidsimpson  staff   44432  5 Nov 04:35 fontawesome-webfont.woff

dvdsmpsn:my-theme davidsimpson$ ls -la target/classes/my-theme/assets/font-awesome/fonts/
total 1128
drwxr-xr-x  7 davidsimpson  staff     238 12 Dec 14:11 .
drwxr-xr-x  6 davidsimpson  staff     204 12 Dec 14:11 ..
-rw-r--r--  1 davidsimpson  staff  114827 12 Dec 14:11 FontAwesome.otf
-rw-r--r--  1 davidsimpson  staff   67119 12 Dec 14:11 fontawesome-webfont.eot
-rw-r--r--  1 davidsimpson  staff  202148 12 Dec 14:11 fontawesome-webfont.svg
-rw-r--r--  1 davidsimpson  staff  101003 12 Dec 14:11 fontawesome-webfont.ttf
-rw-r--r--  1 davidsimpson  staff   79559 12 Dec 14:11 fontawesome-webfont.woff

If the sizes are different, the fonts may not be displayed correctly, especially in Firefox. Firebug will display no errors.

Try Firefox inbuilt debugger instead (CTRL+SHIFT+K)

You'll get something like this...

[13:30:29.827] downloadable font: incorrect file size in WOFF header (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1)source: http://wiki.example.com/s/en_GB-1988229788/4527/660525579de30883af214a8e1a751cb99357bcff.89/1.0.14/_/download/resources/com.example.confluence.plugins.theme.my-theme:font-awesome-resource/fontawesome-webfont.woff?v=4.0.3 @ http://wiki.example.com/s/d41d8cd98f00b204e9800998ecf8427e/en_GB-1988229788/4527/660525579de30883af214a8e1a751cb99357bcff.89/1.0.14/_/download/batch/com.example.confluence.plugins.theme.my-theme:font-awesome-resource/com.example.confluence.plugins.theme.my-theme:font-awesome-resource.css

[13:30:29.827] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1)source: http://wiki.example.com/s/en_GB-1988229788/4527/660525579de30883af214a8e1a751cb99357bcff.89/1.0.14/_/download/resources/com.example.confluence.plugins.theme.my-theme:font-awesome-resource/fontawesome-webfont.woff?v=4.0.3 @ http://wiki.example.com/s/d41d8cd98f00b204e9800998ecf8427e/en_GB-1988229788/4527/660525579de30883af214a8e1a751cb99357bcff.89/1.0.14/_/download/batch/com.example.confluence.plugins.theme.my-theme:font-awesome-resource/com.example.confluence.plugins.theme.my-theme:font-awesome-resource.css

Which means you need to do some resource filtering on your maven build.

Aside: In Google Chrome, the font will likely be displayed correctly, but has the perceived side effect of increasing the page render time. I imagine that this is because Chrome is trying to understanding the encoding and then display the correct font.

Next, add maven resource filtering in pom.xml:

<build>
    <sourceDirectory>src/main/java</sourceDirectory>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <filtering>true</filtering>
            <includes>
                <include>atlassian-plugin.xml</include>
            </includes>
        </resource>
        <resource>
            <directory>src/main/resources</directory>
            <filtering>true</filtering>
            <!-- Prevent font files from being included & filtered -->
            <excludes>
                <exclude>my-theme/assets/font-awesome/fonts/*</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>src/main/resources</directory>
            <filtering>false</filtering>
            <!-- No filtering, but only include font files -->
            <includes>
                <include>my-theme/assets/font-awesome/fonts/*</include>
            </includes>
        </resource>
    </resources>
	...
</build>

Resource filtering does not work in subdirectories — you have to be specific to the directory containing the fonts.

Note: I didn't need to do any of the maven resource filtering on my local machine, but building on Bamboo definitely mangled the font files, so resource filtering was vital.

Thanks David,

For your immediate respose.I am going to try this immediately.

Thanks a lot David,

You solved my problem. It worked for me.

Excellent answer David, helped a lot.

cheers

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,543 views 4 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you