Add An Icon to a Content Header

Adding an icon to a header adds additional definition to the content and makes for a great user experience. Font awesome offers a vast selection of icons and the are easy to apply.

Xidipity post/page titled "Add An Icon to a Content Header" header image


It is very likely at some point in time the need will arise where the solution becomes adding an icon to a header tag. One solution is to add an icon image and another is to use a Font Awesome icon. As Xidipity supports Font Awesome, let’s explore how that would work.


Sometimes it’s handy to see the finished product before beginning, so it is presented below.






Code vs Glyph vs Unicode

At the top of each font awesome icon page are three methods in which to obtain the icon.


Code tag

This is the most common method of adding a font awesome icon. The heavy lifting is performed by a series of Cascading Style Sheets but there is an issue with WordPerfect and the use of the “<i>” tag. The work-a-round is to include a Zero Width Space unicode character or a character of your choosing to the empty tags as shown below.


To Display:
Embed: <i class=”fas fa-fingerprint”>&#x200B;</i>



A glyph is defined as a hieroglyphic character or symbol and is supported by font awesome. I like the versatility of the glyph but using them requires the use a template. To learn how to insert a glyph in content see “Fun with Font Awesome” post.


Font awesome organizes its icons by type which includes brand (fab), regular (far), and solid (fas). It’s important to match the right template to the desired icon. For the fingerprint icon, the correct class is “FAS”.


To use the glyph, the correct template line is inserted into the content using the embed ( save_alt ) toolbar option. Then, copy and paste between the guides (••). Highlight to apply color or adjust size. Finally, delete the guides.



Unicode is a standard where each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs. Font awesome supports this standard but the solution is not flexible as it requires creating custom Cascading Style Sheets (css) code.



For this tutorial I will demonstrate how to build the above header using a font awesome icon tag preceding the header text. A little planning goes a long way so let’s review my assumptions.

  1. The header tag will be “h3”
  2. The icon color will be selected from the Xidipity color palette
  3. The icon will be the font awesome fingerprint icon
  4. The header color will be the default
  5. The content will be “Biometrics”
  6. I will not be concerned with the icon size or justifying the header text




create header


  1. Place the cursor at the line in the document where the header will be placed
  2. Type the following “Biometrics”
  3. Highlight the word and select heading 3 from the paragraph dropdown.
  4. Optionaly, at the beginning of the header add two colons and a space to service as styling guides.


At this point the header should look something like the following.


: : Biometrics


copy & paste icon tag


  1. Open Font Awesome in a new window/tab
  2. Search for fingerprint
  3. Copy the icon tag to the clipboard
    Hint: Click “<i class=”fas fa-fingerprint”></i>”
  4. Place the cursor between the styling guides (:×:)
  5. Click the embed ( save_alt ) toolbar button
  6. Paste the icon tag into textbox
  7. Optionally, add the spacing code “&#x200B;” between tags
    Hint: “<i class=”fas fa-fingerprint”>&#x200B;</i>”
  8. Click the Ok button


At this point the header should look something like the following.


:: Biometrics


style icon


  1. Open the color palette in new window/tab
  2. Select blue grey 200 (“b0bec5“)
    This action copies the hex code to the clipboard
  3. Highlight the icon and styling guides.
  4. Click the text color drop down ( format_color_text )
  5. Select custom
  6. Highlight the hex code to the right of the “#”
  7. Paste the new hex code into the text box
  8. Click the Ok button


Now the header should look like the following.


:: Biometrics


delete styling guides


The only thing left to do is delete the icon styling guides.


Now the header should look like the following:




Although I selected the Header 3 tag, the final product will scale to any header selected from the paragraph dropdown.



What is up with the styling guides? See this for more information.


Skill Level



Hint: The caps may be styled by highlighting and selecting the desired color. Be sure the entire cap(s) is highlighted.




About: Admin

My name is John Baer and I am the author of the Xidipity theme. My goal with Xidipity is to create a theme which is flexible and easy to use. This is accomplished by the application of templates and enhancing the classic editor. Xidipity leverages the latest web technologies to remain snappy.



Got Something To Say?

Your email address will not be published. Required fields are marked *