How To Use Google Icons In Blogger Template?

Google Font Icons

Html Font Symbols

This type of symbols easy to use in web pages. They easy the navigation of the website, if you not write any thing in the navigation, these icons helps to navigate easier. Some of the most common symbols:


Code Symbol
Home home
About create
Contact contact_phone
Copyright copyright
Register how_to_reg
Download file_download
Upload file_upload


First copy the below code and paste between <head> </head> tags in html. So the above mentioned symbols or icons work, if this below code is pasted in respective place.


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Google Icons
Place style sheet

Either you find <head> or <head></head>, place the code after <head> and before </head>.

Google Fonts Placement
<head></head>
Google Fonts Placement
<head>

How insert Google Icons in Website?

First search on google, "google icons", go to the website, click on the desired icon, the window will open.

Google Icons Select
Select desired icon
Google Icons Selected
Window will open

Copy the code, this code is different for different items, if you want place different items, so click on the items listed in the website, so the respective code of the item will show. Sample codes are given below:

Code Symbol
<span class="material-icons">home</span> home
<span class="material-icons">create</span> create
<span class="material-icons">contact_phone</span> contact_phone
<span class="material-icons">copyright</span> copyright
<span class="material-icons">how_to_reg</span> how_to_reg
<span class="material-icons">file_download</span> file_download
<span class="material-icons">file_upload</span> file_upload
Google Icons Selected Copy
Copy the code

So, copy the code or click on the copy icon, the code will automatically copied. After that place in the desired location of the website.

© P4Pakao. All rights reserved. Distributed by ASThemesWorld