The best way to Create a Social Media Icon (Social Media Badge) utilizing HTML/CSS and Superior Fonts

The best way to Create a Social Media Icon (Social Media Badge) utilizing HTML/CSS and Superior Fonts

On the whole, a web site has a social media account, which will be an official or private account, which is normally used as a contact or backlink and so forth. OK… due to this fact on this article I’ll share a tutorial on create social media hyperlinks in icon kind utilizing Font Superior.

What’s Font Superior?

Font Superior is a toolkit supplier within the type of icon-shaped fonts organized in CSS (Cascading Model Sheets) and used to assist the looks of a web site. For additional dialogue about Icon Fonts, you’ll be able to learn the next article: Attending to Know and Understanding Icon Fonts.

Why use Font Icon (Font Superior)?

The benefits of utilizing icon fonts if you create Social Media hyperlinks utilizing Font Superior are:

  • By way of look, it can look easier, extra enticing and in addition informative.
  • It saves capability and is lighter when a web site web page is loaded by an online browser, in comparison with utilizing photographs.

The best way to Create a Social Media Badge (Social Media Hyperlink) utilizing Superior Fonts

Following are the steps you’ll be able to take to create social hyperlinks in your web site utilizing HTML, CSS and Font Superior:

To start with, put together the Superior Font that will likely be used, on this article I’ll use Font Superior You should use a web based CDN or set up it offline in your native undertaking.

In case you are constructing a web site offline, it’s extremely advisable to obtain superior fonts, in order that superior fonts can seem on the looks of your web site when working offline. Nevertheless, for those who use a web based CMS service, for instance, and Blogger, it’s extremely advisable to make use of Font Superior to make use of one that’s hosted by a selected service supplier or CDN (Content material Supply Community).

This is insert/outline Font Superior on a web site:

1. Superior CDN Font (on-line)

To make use of the Font Superior CDN, please copy the next code into the pinnacle tag ( …Right here… ) in your undertaking file:

Then please Save. (for those who use font superior CDN, be certain your laptop is related to the web, in any other case the font won’t seem).

2. Obtain Superior Fonts

To make use of Font Superior, you’ll be able to first obtain the Superior font through the official web page: Font Superior.

– Then please extract and place the extracted folder within the property folder of your undertaking (your_project/property/…).

– Subsequent, you’ll be able to outline or declare the situation of the superior CSS font within the index.html file or web page view in your undertaking. For instance the next:


After you might have completed inserting Font Superior into your undertaking or web site web page, you’ll be able to then name the icon utilizing a tag which is used to show textual content inline. , , or by inserting a category whose worth accommodates the identify of every superior font outlined within the CSS toolkit file. The next is a listing of superior fonts that show social media logos or sure distributors:

NO Identify Preview Supply code Copy
1 Fb
2 Twitter
3 Pinterest
4 Instagram
5 Skype
6 LinkedIn
7 Tumblr
8 What’s it
9 YouTube
10 Bloggers
11 WordPress
12 reddit
13 Flickr
14 Vimeo
15 Snapchat
16 Github

Other than what I’ve talked about within the desk above, there are numerous extra variations of superior fonts within the type of social media that you need to use, and yow will discover them through the search icon menu on the official Font Superior web page.

Picture of the Search Menu on the Font Superior Web site

You may copy the superior font supply code supplied within the desk above, then please regulate the href worth to your social media hyperlink or URL, for instance as follows:“>

You need to change the vacation spot of the hyperlink on the social icon, by changing the purple URL with the social media hyperlink or URL that you’ve got.

Lastly, do not forget to repeat the CSS to regulate the looks of the Social Media Icons. The next is the CSS for managing the styling of the social media icons created above:

Instance of Supply Code

Perhaps the next HTML and CSS code can be utilized for example so that you can create a Social Media Button in your web site:

Interpretation Outcomes of HTML and CSS Supply Code Examples

You may place the HTML script that you’ve got created in any a part of your web site, for instance the Navbar / navigation bar, header, sidebar, and even the footer. If a web site has a hyperlink that refers back to the creator’s social media, guests or viewers can extra simply comply with your social media account or focus on articles that you’ve got revealed in your weblog or web site.

OK… that is sufficient for this text which discusses create social media icons and hyperlinks utilizing HTML, CSS and Font Superior, we apologize for a lot of shortcomings… that is all and thanks…

~Hopefully that is helpful~

Share This


Wordpress (0)
Disqus ( )