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
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Thursday in Marketplace Apps

Tips on how to choose the best estimation method for your planning

Planning and grooming sessions all come with their own sets of rules. Team members meet to estimate stories or other work items, all according to an agreed-upon process. And with every session comes ...

77 views 0 11
Read article

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you