Embed Material Design Icons to Divi

Last modified Aug 5, 2021
Difficulty Intermediate
Language CSS, HTML
Category

Watch Tutorial

✅ Material Design
✅ WP and Divi Icons
✅ Divi Space Membership

Transcript:

Hey everybody, David here from Divi Space.

Google’s Material icons are beautiful and free to use personally or commercially.  These icons are available in several formats and are suitable for different types of projects. Today I’m going to show you two ways you can start using these icons on your Divi Website. Alright, let’s go!

The easiest way to set up icon fonts is through Google Web Fonts. All you need to do is include a single line of HTML.

In your WordPress dashboard, navigate to Divi and Theme Options and select the Integration tab. Make sure the header code is enabled and paste the code.

include the icon name. Find the icon names in the material icons library by selecting any icon and opening the panel. You can also stylize the icon with additional CSS as you would with fonts.

Here is an example CSS code you can use to stylize the icon.

The second way to install Material Icons to your site is to use the wp and divi icons plugin which will add more than 2500 icons to WordPress and includes Font Awesome Icons, Material Icons, and 450 custom-designed icons. This plugin also has  48 multi-colored icons and a customizer so you can create your own library of color combinations.

One of my favorite features of this plugin is that the icons are searchable and you can see them in a live preview. WP and Divi Icons Pro is available as a standalone purchase or if you are a Divi Space Annual or Lifetime Member, it’s included! You can find a link to the WP and Divi Icons in the video description.

Thanks for joining me in this Divi Space Snippet Series, See you next time!

 

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i>

 

CSS

i.material-icons {
font-size:35px;  
color: #ffffff;
padding:10px;
border-radius:50%;
box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
background-color:#3793ef;
}

 

Does this snippet (still) work?

Please let us know if everything worked as expected. If you think this code saved you time, we will be happy to receive a comment! :)

Subscribe to our youtube channel because there’s more to come!

License: This CSS snippet is created by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

 

Your Comments

2 Comments

  1. andres

    Hi, I am using Mac and this is not working. When I paste the code it appears the word ”face” instead of the icon.

    Reply

Submit a Comment

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

Next snippet Add Custom Social Media Icon to the Divi Menu
Previous snippet Divi Contact Form: Center Submit Button