How To Add Material Design Fonts Icons In Blogger

0
How To Add Material Design Fonts Icon In Blogger template
Do you know what is Material Icons? How to install them in your website or blog? If you don't know no need to worry at all today we are going to share How to add material web fonts icon in your blogger template.First of all let me give you an overview of material icons - how to install them , how to get material fonts icon , how to integrate in your website or in projects.

What are Material Icons?

Material icons are designed beautifully and very simple to use in your website,iOS and Android Projects.Material design icons are web friendly and ensure readability and clarity at large and small sizes, material design icons are optimized for lovely display on all the display resolutions.The icons are to be had in several codecs and are suitable for one of a kind styles of projects and structures, for builders of their apps, and for designers.

Material design icons comes under Creative Common Attribution 4.0 International License (CC-BY 4.0).You can feel free to use, share, re-share , download but you cannot sell theme. The Complete Material web fonts icons set available  to download on Material icon library and icons comes in SVG and PNGs format that are suitable for website , Android , iOS.

Material Icons Now In Blogger

Before we all are using Font awesome icons now we have option which we want to use. Google released Material Fonts icons to increase the readability and clarity at large and small scale sizes and these icons best optimized for beautiful display on all the screen resolutions.Now you can Design and replace all the font awesome icons with google material fonts icons.There are many material designs fonts icons are available but unfortunately currently all of them are not available to use in blogger, we believe soon all of them will be available.So we think at least give a worthy try to material design icons.Below are the example of material  designs web fonts icons: 
delete_foreverfavoriteg_translatethumb_up

How to Install Material Web Fonts Icons In Blogger Template

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
Step 5. Now Save your Template

Step 6. Now to install icons visit Media library icons  and choose your icon from there,when you click on the icon you can see on the page below there icon HTML code will display just copy that and paste it where you want to display material design icons in your blogger template.Look below for example how the html code will look like:
<i class="material-icons">copyright</i>
 or you can also use HTML Entity code too.
<i class="material-icons">&#xE90C;</i>
Both will display Copyright icon in your website or blog.

How to customize Material design icons 

Material designs fonts icons are very simple to customize with css. The default scale is 24px , you can increase or decrease the size of fonts icons and also give them a color.Look below for  CSS rules for material design sizing.
.material-icons.md-16{font-size:16px;}
.material-icons.md-18{font-size:18px;}
.material-icons.md-24{font-size:24px;}
.material-icons.md-36{font-size:36px;}
.material-icons.md-48{font-size:48px;}
Material Design fonts icons looks best at 24px size. However if you want to display icons in different size using the above CSS rules will help you.
adding css rule to increase the material design font icons size

Coloring Material Design Icons

To set a custom color on material design icons,you must define the css rule for the specifying the desired color of your choice.
.material-icons.orange600{color:#FB8C00;}
or.material-icons.md-orange{color:orange;} 
adding color on material design icons in blogger
However we can also add the CSS style if we want more styling on the Material design font icons,later on we will discuss on more styling of material design..till then enjoy!
complete guide tutorial on adding installing web material fonts icons in blogspot.Learn trick to install materail web fonts icons by google in blogger template.
Do you know what is Material Icons? How to install them in your website or blog? If you don'...
SUMMARY

complete guide tutorial on adding installing web material fonts icons in blogspot.Learn trick to install materail web fonts icons by google in blogger template.

You Might Also Like:

We hope this article helped you to learn How To Add Material Design Fonts Icons In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Material Design Fonts Icons In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand