How to include icon fonts in plugin.
Asked by 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%E2%80%A6es/myPlugin:icon-editor/fonts/fontawesome-webfont.woff?v=4.0.3)[http://localhost:1990/confluence/s/en_GB-1988229788/4732/NOCACHE1/2...es/myPlugin:icon-editor/fonts/fontawesome-webfont.woff?v=4.0.3](http://localhost:1990/confluence/s/en_GB-1988229788/4732/NOCACHE1/2%E2%80%A6es/myPlugin:icon-editor/fonts/fontawesome-webfont.woff?v=4.0.3)404 (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:](http://trupti.addteq.com:1990/confluence/s/en_GB-1988229788/4732/NOCACHE1/2.0.1/_/download/resources/Addteq.Excellentable:icon-editor/fonts/fontawesome-webfont.woff?v=4.0.3)

Thanks.


Answers:
author: David at David Simpson Apps
body: 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

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

**Aside:** Issue [PLUG-854](https://ecosystem.atlassian.net/browse/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 888drwxr-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.woffdvdsmpsn:my-theme davidsimpson$ ls -la target/classes/my-theme/assets/font-awesome/fonts/total 1128drwxr-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**:

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

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.

comments: author: Trupti Kanase
body: Thanks David,

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


author: Trupti Kanase
body: Thanks a lot David,

You solved my problem. It worked for me.


author: Carsten Hilber
body: Excellent answer David, helped a lot.

cheers