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.

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 bottom of each font awesome icon page are three methods in which to obtain the icon.


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. 




GitHub Gist



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 with a font awesome icon that precedes 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 palette
  3. The icon will be the font awesome fingerprint icon
  4. The header color will be the default
  5. The header text will be “Biometrics”
  6. I will not be concerned with the icon size or justifying the header text



1 Create Header


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.
Add Styling Guides
  1. At the beginning of the header add two colons and a space


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


•• Biometrics


2 Copy & Paste Font


  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 dots (•×•)
  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



3 Color Icon


  1. Open Xidipity 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


4 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? The styling guides are optional but they make it easier to highlight the icon when applying a style. 


Skill Level


          


Leave a Reply

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