Embed Material Design Icons to Divi

Last modified Oct 11, 2019
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.

It’s easy to incorporate icons into your web page. Here’s a small example, create <i> tag, add a material- icons class and inside the tag, 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! 

___

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

 

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;
}

 

Your Comments

Submit a Comment

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

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More