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

[Michelle Peters Spivack]

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]

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

[Igor M_]

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.

<span class="aui-icon aui-icon-small aui-iconfont-info">Insert meaningful text here for accessibility</span>

<span class="aui-icon aui-icon-small aui-iconfont-warning">Insert meaningful text here for accessibility</span>

[Michelle Peters Spivack]

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