Bootstrap styling guide

HTML code and instructions for using the styles demonstrated in this 'topic'

Display

Icons

  Minor knowledge of HTML required.

You can use icons to draw attention to special information in FLO. The icons in Font Awesome 4.7.0 are available to use in FLO, with a slight modification.

What can you do with Font Awesome?

You can use icons to draw attention to links

Draw attention to specific information

Don't give your patients nicknames unless they prefer it

Watch your patient's body language for cues about their mood

Use as an alternative to images

Remember to bring your student ID card to your placement, or you will be refused entry!


How to modify Font Awesome for use in FLO

When you select an icon in Font Awesome you are given HTML code to put in FLO's HTML editor.

<i class="fa fa-id-card" aria-hidden="true"></i>

When putting into FLO, change the i at the beginning and end to em.

<em class="fa fa-id-card" aria-hidden="true"></em>


Styling your icons

To add a colour to your icon, add one of the following classes to the <em> tag

text-success

text-danger

text-warning

text-info

text-primary

To change the size of an icon, add one of the following classes to the <em> tag

Normal size
fa-lg
fa-2x
fa-3x
fa-4
fa-5x
<em class="fa fa-camera-retro"></em> Normal size
<em class="fa fa-camera-retro fa-lg"></em> fa-lg
<em class="fa fa-camera-retro fa-2x"></em> fa-2x
<em class="fa fa-camera-retro fa-3x"></em> fa-3x
<em class="fa fa-camera-retro fa-4x"></em> fa-4
<em class="fa fa-camera-retro fa-5x"></em> fa-5x