How to include icon fonts in plugin.

Trupti Kanase July 3, 2014

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 at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
July 3, 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.

Trupti Kanase July 3, 2014

Thanks David,

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

Trupti Kanase July 3, 2014

Thanks a lot David,

You solved my problem. It worked for me.

Carsten Hilber
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
November 30, 2016

Excellent answer David, helped a lot.

cheers

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events