It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Pls help - Cannot display SOME icons using AUI Flatpack

I am using AUI Flatpack to create a prototype.

I need to display the icons on the buttons, but surpisingly some icons do not get displayed

<button class="aui-button"><span class="aui-icon aui-icon-small aui-iconfont-delete"></span> Delete</button>
<button class="aui-button"><span class="aui-icon aui-icon-small aui-iconfont-watch"></span> Watch</button>

On using these two lines, the Delete icon does not gets rendered but the Watch icon does get rendered.

Really confused, how to solve it? I have tried few of the other icons as well. Out of 20 icons tried, about half of them do not get rendered!

All of the icons are rendered in the sandbox.

Any help will be appreciated.

4 answers

I fixed it manually setting right background in css. I found it on AUI-sandbox and just copied base64 of image

Hey thanks a lot for your answer, could you guide me how to copy the base64 of the image from the css file of AUI-Sandbox.

Upon copying it displays as a "[?]", i am sure there must be some proper way to copy the image to my-aui.css file.

Thanks once again.

well chrome-dev-tools is so helpful

Well, chrome-dev-tools for example. Ahh.. here is no preview, so here is the link

Hey Thanks a lot for your help. But i am unable to find the same option of background image. I am very new in the web-development so am trying my best.

Attached is that what i get in chrome-dev-tools.

in the conents field i get "\f1f0"

Oh, that's the custom font. Sorry. There's no css image for it. And now I understand your problem - you use old version of that font in your product. For example in v1.3 there's no delete icon. I don't know where to find it out for shure, but I think I know what will help you!

Here you can find link to download the latest version font named "Atlassian icons". Unzip and put atlassian-icons.ttf into your resources folder. Load that one as resource

<resource type="download" name="atlassian-icons.ttf" location="atlassian-icons.ttf"/>

And you need to force its loading in your css like

@font-face {font-family:"Atlassian Icons";src:url(atlassian-icons.ttf) format("truetype");}
I think that will override default font and will make icons you need visible

First of all, I would like to thank you for your time.

I will try to again clearly repost my proplem with pictures.

I basically want to use the delete icon which is not getting rendered.

When i try to use the icons as informed in the AUI-Sandbox, using the span element, only the following icons are rendered on my page (please see the attached page) - half of the icons are not rendered.

I checked the aui-all.css file, it contains the entry only for few icons in this format (i have added the snapshot of the aui-all.css file as well) - there is no entry for the delete icon in the aui-all.css.

.icon-move {

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAPUlEQVR42rWRMQoAMAjE+v9P29syBeFKs50YVDzGBKmbACKZACIV69G0ZqQJqwQJBcWk8iYD6eufTHha7wLFyOcZBIC2HgAAAABJRU5ErkJggg==");

cursor: move;


if i can find out the css entry for other icons and add to the aui-all.css then i think all the icons will be rendered. Or may be get the correct aui-all.css file with all the icon entry properly listed in it.

I tried to implement your method as well, but am unable to figure out yet. Will again try to study and implement it as well.

Not all of these icons have image representation, maybe. So, try to use latest font version. I think it can help you

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Next-gen

Keyboard shortcuts have arrived for next-gen projects!

...ollected feedback from users around the lack of shortcuts, and we’re here to address that: In next-gen projects, I miss the keyboard shortcuts badly. This is particularly true on the Board, but also i...

101 views 0 1
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you