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.:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s