Pls help - Cannot display SOME icons using AUI Flatpack

[Kumar Khiani]

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.

[Dmitry_Zharikhin]

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

[Dmitry_Zharikhin]

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

[Kumar Khiani]

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.

[Dmitry_Zharikhin]

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

[Kumar Khiani]

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"

[Dmitry_Zharikhin]

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

[Kumar Khiani]

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.

[Dmitry_Zharikhin]

well chrome-dev-tools is so helpful