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

8 votes
Accepted answer
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
Posted Monday in Confluence

Organizing your space just got easier - Page Tree Drag & Drop is here

Hi Community! I’m Elaine, Confluence Product Manager. You may have read my earlier post about page tree in space navigation sidebar. I'm excited to share another improvement that helps you organize ...

103 views 3 4
Join discussion

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