Using AUI icons in plugin

[Annie]

I want to use the following AUI iconfont in my plugin:

<span class="aui-icon aui-icon-small aui-iconfont-star">Star</span>

However, I'm not sure which dependencies I need to declare in my atlassian-plugin.xml file. Can someone point me in the right direction?

Thanks.

[cofarrell]

Hi Annie,

If you're just looking for that dependency then the following is the most specific key.

com.atlassian.auiplugin:aui-experimental-iconfont

If you're in stash I would probably just recommend using our global dependency:

com.atlassian.stash.stash-web-plugin:global

This includes all the normal dependencies like AUI, jquery, etc and should be available on every page.

I suspect what the actual problem is that you've seen that font on the design site (or somewhere?) but can't see it in stash? We bundle AUI 5.1-m1 (in Stash 2.4) when unfortunately star was introduced in 5.1-m4. I suspect you might have to wait for a later release and/or include that font manually in your plugin somehow. Someone might chime in at this point and tell you a better/safer way.

Cheers,

Charles

[jpoh]

Annie,

Charles is right in that the star icon that you're trying to use is added in a later milestone of the AUI plugin. The icon font is still a work in progress (hence being an 'experimental' component). You can either wait till we release a version of Stash that has an updated version of AUI which includes that new icon, or use a normal image icon (GIF or PNG) in your plugin for the time being. There have been some significant changes to the icon font in the last few AUI milestones and I wouldn't recommend including just the updated font files as it may not match up with the existing CSS styles and classes for the icons in Stash and in AUI.

Cheers,

Jon

[BenA]

Charles is right, you need to require the iconfont as it's still in the experimental phase. I've just updated https://developer.atlassian.com/display/AUI/Icons to include that information, my apologies that it wasn't there!

[Patrick Forssell]

Hello Annie!

As Jonathan said it's not recommended to copy those new icon fonts

There have been some significant changes to the icon font in the last few AUI milestones and I wouldn't recommend including just the updated font files as it may not match up with the existing CSS styles and classes for the icons in Stash and in AUI.

And I also would suggest using images instead of copying the icon fonts.

However if you still despite our warnings need to get it this way, I guess you could download current version of flat pack from https://developer.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)+Developer+Documentation and copy the icon fonts(woff, ttf, eot and svg) from \aui-flat-pack-5.1\aui\aui\css, rename the icons fonts and adding something like this in your css file

@font-face {
    font-family: "Font Name";
    src: url(nameofyourplugin-atlassian-icons-.eot);
    src: url(nameofyourplugin-atlassian-icons.eot?#iefix) format("embedded-opentype"),
    url(nameofyourplugin-atlassian-icons.woff) format("woff"),
    url(nameofyourplugin-atlassian-icons.ttf) format("truetype"),
    url(nameofyourplugin-atlassian-icons.svg#atlassian-icons) format("svg");
    font-weight: normal;
    font-style: normal;
}

.nameofyourplugin-aui.aui-icon-small:before,
.nameofyourplugin-aui.aui-icon-large:before {
    font-family: "Font Name";
}

.nameofyourplugin-aui.aui-iconfont-star:before {
    content: "\e01a";
}
.nameofyourplugin-aui.aui-iconfont-unstar:before {
    content: "\e01b";
}

Note that I used "Font Name" as the name of the font, I also used "nameofyourplugin-aui" class to separate the real aui-iconfont version from the font we define here. Of course you would want to change thease names to something that made more sense.

Note that all of the "custom" icon spans must contain your "nameofyourplugin-aui" class

<span class="aui-icon nameofyourplugin-exp-aui aui-icon-small aui-iconfont-star">Rate</span>

Also here is a similar question and a similar answer: https://answers.atlassian.com/questions/186011/certain-icons-from-aui-experimental-iconfont-aren-t-loaded

-Patrick

[m]

Hi Annie,

We have a tutorial that walks you through the basics of using the ADG and AUI. You may find it useful. If you use our SDK to build your plugin, you get a lot of AUI resources automatically. You'll need to make sure you have set up your template dependencies correctly. This page in the tutorial explains it:

https://developer.atlassian.com/display/AUI/Use+AUI+in+an+Add-on

Mary