How to include icon fonts in plugin.

[Trupti Kanase]

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.

[David at David Simpson Apps · Accepted solution]

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.

[Trupti Kanase]

Thanks David,

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

[Trupti Kanase]

Thanks a lot David,

You solved my problem. It worked for me.

[Carsten Hilber]

Excellent answer David, helped a lot.

cheers