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:
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 {Step 5. Now Save your Template
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 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"></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 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.
.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;}
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;}
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!