Add or install material design icons in blogger with simple and easy steps.
In addition to writing we need a picture or icon directly to more easily understand the meaning of the writing on the blog menu. There are several platforms that provide this icon font for example websites such as Font Awesome which was already popular.
What is the advantage Material Icons?
Icons material is made by Google Team as a form of a special icon for Material Design, which has been applied to almost all applications owned by Google. Of course, this icon looks more modern than the icon long, icon material shortage at the moment is a list of icons that are still losing a lot compared with Font Awesome.account_circlefeedbackhomecommentandroid
Tutorial How to Install Material Icons:
1. Put Google Web Fonts below just above the code</head>.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>Besides Using Web Fonts, man can also use
@font-face
the put on top of the code ]]></b:skin>
or </style>
@font-face {Furthermore Open https://design.google.com/icons/
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';
}
Select the icon that you want to use on the blog ...
Examples of HTML usage Material Icon
<i class='material-icons'>account_circle</i>
.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}
and also change the html code icon to be as below:
account_circle <i class="material-icons md-18">account_circle</i>
account_circle <i class="material-icons md-24">account_circle</i>
account_circle <i class="material-icons md-36">account_circle</i>
account_circle <i class="material-icons md-48">account_circle</i>
- [message]
- ##check## Important Note
- md-18, 18 is the size of the font.
To install Material Icons via CSS: before and: after, sample code as below:
.cobatest:after{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}.cobatest:before{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}
Tutorial detail: Google Github
That tutorial How to Install Material Design Icons on Blogger that I can share this time, thank you.
This article "How to Install Material Design Icons in Blogger" is protected by
COMMENTS