How to use FontAwesome in Divi to create beautiful inline download buttons

Today, I’ll show how create amazing download buttons (or any button, for that matter) with Divi, and beautiful icons from FontAwesome, the most known and used font-library. I’ll be using an example of such from the Lagoon Divi Child Theme, and we will add hover effects as well to make it look really awesome.

Let’s get to work

In this tutorial, we will be using the FontAwesome icon library for the buttons’ icons, and a Divi text module for the button, rather than the button module itself. The customization of each button will be done using CSS which we will place in our page’s Custom CSS settings. Let’s begin.

Integrating FontAwesome with Divi

While Divi comes with a pre-installed library of icons (the “ETmodules” icon family), it does not include too many to choose from, and does not provide an easy way to add additional icons. In order to add FontAwesome to our Divi site, we will have to get a line of code from the FontAwesome website, and place it in our Header Integration settings under Divi Theme Options.

Head over to the FontAwesome website, select the code presented on the page and copy it:

Next, open your Divi website Admin Dashboard, open the Divi Theme Options, navigate to the “Integration” tab, place the code you’ve copied into the box that reads “Add code to the < head > of your blog” and click save.

Creating the download buttons

Now open the page in which you’ll be adding your download buttons, create a new section . and give it some dark background. Then create a row within that section and make sure it has a one column layout.

Within the newly created row, add a code module, and place the following code within it:

<span class="apple-button-wrapper">
  <i class="fab fa-apple"><span class="apple-button">&nbsp &nbsp App Store</span></i>
</span>

Navigate to the “Advanced” tab of the code module you’ve just created, open the “CSS ID & Class” section, and write inline-download-buttons under “CSS Class”. 

Now duplicate this code module twice, and for each paste one of the following codes:

<span class="google-button-wrapper">
  <i class="fab fa-google-play"><span class="google-button">&nbsp &nbsp Google</span></i>
</span>

<span class="mac-button-wrapper">
  <i class="fab fa-app-store-ios"><span class="mac-button">&nbsp &nbsp Mac OSX</span></i>
</span>

Styling the buttons with CSS

Now that the buttons are placed on your page, we need to customize their design and align them to be positioned in the same row.

Open the page settings, navigate to the “Advanced” tab, and paste the following code under the Custom CSS area (alternatively, you can place the code in your child theme’s style.css file, or in Divi’s global Custom CSS settings under Divi > Theme Options in the Admin Dashboard):

/* Inline Download Buttons */
 .inline-download-buttons {
     display: inline-block;
     margin: 0 15px;
}
/* Apple Download Button */
 .apple-button-wrapper {
     color: #ffffff;
     border-color: #ffffff;
     background-color: #27b86c;
     padding: 12px 34px;
     -webkit-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
     transition: all 0.2s linear;
     min-width: 200px;
     text-align: center;
     border-radius: 45px;
     border: 1px solid #4069eb;
     display: inline-block;
}
 .apple-button {
     font: 500 16px "Cabin", sans-serif;
}
 .apple-button-wrapper:hover {
     color: #27b86b;
     background: #ffffff;
     border-color: #ffffff;
     -webkit-box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
             box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
}
/* Google Download Button */
 .google-button-wrapper {
     color: #27b86b;
     border-color: #fff;
     background: #fff;
     padding: 12px 34px;
     -webkit-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
     transition: all 0.2s linear;
     min-width: 200px;
     text-align: center;
     border-radius: 45px;
     border: 1px solid #4069eb;
     display: inline-block;
}
 .google-button {
     font: 500 16px "Cabin", sans-serif;
}
 .google-button-wrapper:hover {
     color: #fff;
     background: rgba(255, 255, 255, 0.1);
}
/* Mac Download Button */
 .mac-button-wrapper {
     color: #ffffff;
     border-color: #ffffff;
     background-color: #2773b8;
     padding: 12px 34px;
     -webkit-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
     transition: all 0.2s linear;
     min-width: 200px;
     text-align: center;
     border-radius: 45px;
     border: 1px solid #4069eb;
     display: inline-block;
}
 .mac-button {
     font: 500 16px "Cabin", sans-serif;
}
 .mac-button-wrapper:hover {
     color: #2772b8;
     background: #ffffff;
     border-color: #ffffff;
     -webkit-box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
             box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
}

You should have now reached the final expected result:

Customizing the buttons

While this tutorial focuses on creating the download buttons displayed above, the concept can be implemented to any needed type of button or blurbs. It’s quite easy to alter and customize as you wish.

Let’s take a look.

Changing the icons

Changing a specific icon to another icon from the FontAwesome library is extremely easy to perform. Here’s what you’ll need to do:

Open the FontAwesome icons library, and select “Free” on the left sidebar (FontAwesome has a Pro version that includes many additional icons, but the free ones are usually enough for most people). Now, search for a specific icon you’d like to use (or simply browse freely until you find something you like). I went with Facebook.

Click on the icon you’d like to use, and in the icon’s page, select the code presented at the top left side of the page, like so:

Now go back to the Divi page you are editing. Open the code module settings of the button for which you want to change the icon, and replace the <i class=”fab fa-XXX”> part with the code you’ve copied from the FontAwesome website.

Done. It’s easy as this. Just pick the icon you’d like to use, and paste the code for it in whatever module you like to use it in. The only limitation goes for modules in which you want to add the icon to a “Title” field of a module. These fields do not render html code and will show the actual code you pasted as text, rather than encoding it to the desired icon.

Changing button backgrounds

Customizing the buttons background color is extremely easy as well, and requires changing the value of one CSS element. You will need to have the HEX code of the background color you’d like to have (you can find many free online services to help with that. I personally recommend Coolors), but if you are using the Divi Visual Builder (frontend editing), then forget the HEX code part, since Divi gives the option to choose a color directly from within the Custom CSS settings.

You will notice that the CSS code provided above include 3 classes for each button:

XX-button-wrapper – for defining the button’s design, like color, border, padding and more
XX-button – for defining the text font for the button, its weight and size
XX-button-wrapper:hover – for defining the hover settings for the button

To change the background’s color of a button, simply open the Custom CSS settings where you pasted the CSS code provided above, and under the XX-button-wrapper change the value of background-color to the HEX code of the color you’d like it to have. Or, using the Divi Visual Builder, simply click on the small circle next to the current value and change the color to the one you’d like.

Changing button backgrounds on hover

Once you’ve changed the background color of the button, you’d probably like to change it’s hover background color as well. To do that, follow the steps mentioned above, only this time change the background-color value of the XX-button-wrapper:hover class.

Changing the font

To change the text font of the button is also done via the CSS code. Divi is using the Google Fonts library, so in order to change the text look, just visit the Google Fonts website, select a font you’d like to use, copy its name, and place is in the font value under the XX-button class in your Custom CSS settings (change the current “Cabin” font to your desired one.

Aligning the buttons to the center/right

By default, the created buttons will be displayed and aligned to the left side of the row. If you wish to change that, and align them to the right or left, simply open the settings of the row in which the buttons are placed, navigate to its “Advanced” tab, open the “Custom CSS” section, and under the Main Element area, type: text-align: center; (aligning the items to the center) Or text-align: right; (aligning the items to the right)

Finishing up

As mentioned above, the concept presented in this tutorial can be applied to any module in which you wish to use FontAwesome icons and is very useful when you wish to use symbols that are not included in the Divi font library. It’s simple a great method of boosting your design without the need of purchasing a dedicated plugin that provides the possibility to add icons to Divi. Happy editing!