Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

How to Install Material Design Icons in Blogger

SHARE:

Add or install material design icons in blogger with simple and easy steps.


Material Icons for Bloggers - Back again blanter blog world share a tutorial on material design, this time I'll give you a tutorial on how to install the material icons blogger.

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 {
  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';
}
Furthermore Open  https://design.google.com/icons/
Select the icon that you want to use on the blog ...



Examples of HTML usage Material Icon

<i class='material-icons'>account_circle</i>
To enlarge the icon size buddy just need to add CSS below, my friend is not obliged to follow the following CSS tutorial, because the icon will automatically match the size of the font on the link Those already using the font-size:
.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




Was this article helpful?

Thanks! Your feedback will help us to improve our Services.

COMMENTS

BLOGGER
Need help? Contact to our support center at +92 308 477 4257
Name

Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
ltr
item
TipRicks Blog: How to Install Material Design Icons in Blogger
How to Install Material Design Icons in Blogger
Add or install material design icons in blogger with simple and easy steps.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnY_jplYb3cnmZ7vbdbdCkA5mFsm-WVVarsLTTX9qwqjs43m-kHSVK_vhQJx_H8NhkYLkjteB1xNDoGW7dbM7XByQkXbxA4LvLWJYSOIA3qEJnDjODhHGndPUhwNAuaOaw6NVb5I2Zn3c/s640/how-to-install-material-design-icons-in-blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnY_jplYb3cnmZ7vbdbdCkA5mFsm-WVVarsLTTX9qwqjs43m-kHSVK_vhQJx_H8NhkYLkjteB1xNDoGW7dbM7XByQkXbxA4LvLWJYSOIA3qEJnDjODhHGndPUhwNAuaOaw6NVb5I2Zn3c/s72-c/how-to-install-material-design-icons-in-blogger.png
TipRicks Blog
https://blog.tipricks.com/2016/09/how-to-install-material-design-icons-in-blogger.html
https://blog.tipricks.com/
https://blog.tipricks.com/
https://blog.tipricks.com/2016/09/how-to-install-material-design-icons-in-blogger.html
true
7070217950916442682
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy