If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. How to change material design icons

This tutorial will show you how to change material design icons in WordPress templates.

WordPress. How to change material design icons

Material Design is a full suite of material design icons for easy scalable vector graphics on websites. It is used for some WordPress templates by TemplateMonster.com. Let’s check the way to edit it. There are two ways to update the icons:

  1. Using shortcodes;
  2. Using CSS.

Let’s check both variants. The first approach shows how to update material design icons using shortcodes.

  1. Open WordPress Dashboard and navigate to Pages > All Pages> Home. Locate shortcode lines with material-design icon reference:

    WordPress_How_to_change_material_design_icons_1

  2. Now let’s open server File Manager and locate ‘wp-content/themes/theme####/material/material-design.css’ file there. Open it to check the content. You’ll find a few variants of each icon there. Search for CSS class corresponding to the new icon and copy its title from the file:

    WordPress_How_to_change_material_design_icons_2

  3. Paste it instead of default one to the shortcode line in the page and update changes. Update changes to the page and check the site’s front-end.  New icon appears now.

The second approach shows how to update material design icons using CSS.

  1. Right click the mouse and use ‘Inspect element’ tool to locate the CSS class for the icon to edit. Copy the CSS class for the arrow.

  2. Get back to the WordPress Dashboard and navigate to Appearance > Editor> style.css file. Paste the CSS class for the icon and make sure it has ‘content’ line value.

  3. Get back to the ‘wp-content/themes/theme####/material/material-design.css’ file and search for the value you’d like to use instead of default one.

  4. Paste the new content value to the style.css file. Remember to use ‘!important’ to apply CSS modification properly. The final CSS class should look as follows:

    .block_3  .service-box2:after {
      content: "\e11d" !important;
      }
  5. Update the style.css file once finished with modifications. Refresh the Home page to view the result.

In case you’re searching for a premium design WordPress themes to build a website from scratch, look through our rich collection of templates.

Feel free to check the detailed video tutorial below:

WordPress. How to change material design icons