 |
VOOZH | about |
|
VOOZH | about |
Integrating icons into your website can significantly improve its visual appeal. By adding social media icons to your site, you give visitors an easy way to connect with your brand and share your content, which can boost your visibility and engagement by as much as 60%.
You can either add Social Media icons as images( SVG, PNG ) orCSS Icons. In this article, explore both ways.
Table of Content
Font Awesome Icons are a popular set of scalable vector icons that can be customized and easily integrated into web projects, enhancing visual appeal and user experience. To use Font Awesome Icons, add the following CDN link inside the <head> section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="#" class="fa fa-facebook"></a>Example: In this example, we are using font awesome icons to include facebook icon in our webpage.
Output:
👁 ImageGoogle 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">
<i class="material-icons">facebook</i>Example: In this example we will see the design of icons using google icons with an example.
Output:
👁 ImageIn this we can simply use downloaded svg or png images for better social media icons by downloading from google.
Note: You can select SVG icon through various websites like hero icons, bootstrap icons etc. Bootstrap icon is used in below example
<svg class="bi bi-google" width="64" height="64" viewBox="0 0 16 16">
<path d=" "/>
</svg>
Example: In this example, we will use social icons just by downloading from web.
Output:
👁 Image