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.