Adding fontawesome to bootstrap alerts

In an XPages application I wanted to add some house-styling to a validation alert box. By default you do not get icons with Bootstrap alerts as in the IBM’s OneUI messages box.

So what do you when you want to have best of bot worlds? You blend in Fontawesome!

Navigate to any of the icons you want to use from fontawesome and search for the unicode of it. For the exclamation icon http://fontawesome.io/icon/exclamation-circle/ that is f06a.

Next open your style sheet and add the following lines:

ul.text-error {
list-style: none;
padding: 0;
}
ul.text-error > li {
padding-left: 1.3em;
}
ul.text-error > li:before {
content: “\f06a”; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
}

For the content property add the unicode as demonstrated above. When you look at the alert in your browser the icon is applied e.g.: