Place an Icon Beside Text

What does this code do?

This code snippet will allow you to use Font Awesome to place an icon beside text.

Code Snippet

This code snippet uses Font Awesome for the icons. To use Font Awesome, you will need to copy and paste your personal Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.

To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.

<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>

Then copy and paste the following code into a Code Block on your site.

<div style="display: flex; flex-direction: row; align-items: center; justify-content:flex-start;">
  <i class="fa fa-cogs fa-2x" aria-hidden="true" style="margin-right: 20px;"></i>
  <h3 style="margin-top: 0;">Services</h3>
</div>

Customize

Change the Icon

The following code sets the icon. Go to Font Awesome and find the icon you want to use. Click on the icon and copy and paste the class for that icon in place of fa fa-cogs.

class="fa fa-cogs fa-2x"

Animate the Icon

To learn how to animate the icon, click here.

Resize the Icon

The following code sets the icon size. Go to Font Awesome Size Guide to see your size options. Then you can change fa-2x to the size you would like.

class="fa fa-cogs fa-2x"

Change the Color of the Icon

Font Awesome Icons are set to automatically inherit size and color. You can change this by adding color to the <i> tag. For example, if I wanted the icon to be red I would use the following code in my code block. Notice how I added color:red; in between the style quotation marks of the <i> tag. You can then change the word red to whatever color you like. You can use a word or a rgb, hex, or hsl color code.

<div style="display: flex; flex-direction: row; align-items: center; justify-content:flex-start;">
  <i class="fa fa-cogs fa-2x" aria-hidden="true" style="margin-right: 20px; color: red;"></i>
  <h3 style="margin-top: 0;">Services</h3>
</div>

Change the Size of the Text

The code is set to use a H4, you can change the <h4> </h4> tags to h1, h2, h3, or p.

Change the Alignment

The following part of the code sets the horizontal alignment. The code is set to right-align the icon and text. If you want the text left-aligned change flex-start to flex-end. If you want the text centered change flex-start to center.

justify-content:flex-start;

Stack the Icon and Text

The following part of the code tells the icon and text to be beside each other. If you want the icon to be on-top of the text change row to column.

flex-direction: row;

How To Use It

1. Copy and paste the code as indicated above.

2. Customize according the the instructions.