How to use Google Icons In HTML
Google Icons, similar to Font Awesome, provide a versatile array of scalable vector icons, enriching web design with easily customizable symbols .To use Google Icons, add the following link inside <head> section.
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Syntax:
<i class="material-icons">facebook</i>
Example: In this example we will see the design of icons using google icons with an example.
HTML
<!DOCTYPE> <html> <head> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons" /> </head> <style> h1 { color: green; } .material-icons { padding: 10px; font-size: 40px; width: 40px; text-decoration: none; margin: 5px 80px; } .android { background: #a4c639; color: white; } .facebook { background: #3b5998; color: white; } </style> <body> <center> <h1>w3wiki</h1> <h3>Google Font Icon</h3> <i class="material-icons android">android </i> <i class="material-icons facebook">facebook</i> </center> </body> </html> |
Output:
How to include Social Media Icons in HTML ?
If you want to attach icons then you need a font-awesome CDN link. Social media could be very helpful in promoting and advertising your website. If your brand has social media accounts, it would be wise to give the website visitors an opportunity to join them and share your posts in their timelines.
Note: You can either add Social Media icons as images( SVG, PNG ) or Font icons ( Font Awesome). In this article, explore both ways.
Table of Content
- Method 1: Using Font Awesome Icons
- Method 2: Using Google Icons
- Method 3: Using SVG or PNG Images
Contact Us