Reference guide for AUI icons for info, note, warning, tip?

Question

Hi, I searched and I'm not seeing a reference guide that includes all of the icons available to choose for these four macros. We want to change the icons. I'm looking for a reference that corresponds to \f15a and more like that to choose from.

Thanks!

-Michelle

Daz · Answer

Hi @Michelle Peters Spivack,

AUI does not provide a means of changing the icons for AUI's message components via CSS. The icons are intended to be tied to the semantics of each type of message, to aid colourblind users in identifying the purpose of a particular message. Changing the icons would make them more confusing to those types of users.

AUI also does not expose the iconfont unicode character values as API. The fact that icons are served through an icon font is an implementation detail that may change in the future.

What is your use-case for changing the icon? I'd like to understand the intent behind why you are overriding an existing component's behaviour; perhaps AUI or Confluence can better support what you are attempting to achieve?

Cheers,

Daz

Michelle Peters Spivack · Answer

Hi Igor, I had found that but this is going in the CSS and won't work.

My CSS the warning macro is:

/* RED */
.confluence-information-macro-warning {
 background-color: #fff;
 border-color: #DE350B;
 color: #172B4D;
}

.aui-iconfont-error:before {
 color: #DE350B;
content: "\f1b3"; 
padding-top: 5px;
}

And I need to know what other icon fonts can be added in this format.

I've seen SVG ways to do this, but it would be easier to just have a reference list of icon fonts like "\f1b3"

Thanks!

-Michelle

Igor M_ · Answer

Hey, Is this what you are looking for? https://docs.atlassian.com/aui/7.7.0/docs/icons.html I can find info and warning icons, can't see tip or note, but there are alternatives. Insert meaningful text here for accessibility Insert meaningful text here for accessibility