Advanced Elements - Using Shortcodes with Best Practices

I - Icons

In general, the COTROnline interface is set up for using FontAwesome 4 icons.

The following information provides best practices for inserting these icons into your content.

To search and locate the icon code you require, please visit the Font Awesome 4 Cheatsheet.

The following Font Awesome icon is a business card image, with the Font Awesome 4 icon code "fa-address-card-o" in the name= field.

In your text editor, this icon appears as follows:

Unless specified, the icon will take on the size and style of the text it aligns with. For example, when inserted into a paragraph, it will be a paragraph height. If inserted into a heading, it will be the heading text height.
You can also individually re-size a font awesome icon by setting the "size" attribute to "small", "large" and even "xlarge".
You can also change the colour of your font awesome icon using the "color" attribute and either a Hex (#000000) code or an rgb (rbg(0,0,0)) color value.
- Some basic colors have automatic values such as "red", "blue", "grey", etc.

Here are some examples:

This icon uses the code name "fa-bookmark." It is styled as size="large" and with a color attribute of "#009aa6"

This icon uses the code name "fa-car." It is styled as size="small" and with a color attribute of "#6c6c6c"

This icon uses the code name "fa-info-circle." It is styled as size="xlarge" and with a color attribute of "red"

Below is the same set of icons using a list format to consolidate and standardize icon alignment and appearance:

In your text editor the above icon list appears as follows:

*Note: the extra attribute of "mr-#" delineates spacing to the right of the icon.