Notes
Edit online

Notes contain an additional piece of information that calls attention to particular content. They may have various types (tip, caution, danger, restriction, etc.)

How to Change Note Icons
Edit online

The recommended icon format is SVG.

For the pdf-css transformation type, to change the default icons for notes that do not have a type attribute, add the following rule to your customization CSS :

*[class ~= "topic/note"]:before {
    content: url('../../img/note.svg) " Note: ";
}
For a note of type 'attention' add:
*[class ~= "topic/note"][type = "attention"]:before {
    content: url('../../img/important.svg) " Attention: ";
}

For the DITA Map PDF - based on HTML5 & CSS transformation type, to change the default icons for notes that do not have a type attribute, add the following rule to your customization CSS :

div.note > span.note__title{
    background-image:url("../img/note.svg") !important;
}
For a note of type 'warning', 'caution', or 'trouble' add the corresponding CSS rule:
div.warning > span.note__title{
    background-image:url("../img/warning.svg") !important;
}
div.caution > span.note__title{
    background-image:url("../img/caution.svg") !important;
}
div.trouble > span.note__title{
    background-image:url("../img/troubleshooting.svg") !important;
}