Last Updated on January 18, 2022 by Roshan Parihar
In this tutorial, learn how to replace text with social icons in CSS. The short answer is to hide the text and use the :before CSS selector and add font awesome icons using content codes.
Texts like Facebook, Twitter, and others are not easily attracted users to see and share the content of your website. You can easily convert them into social sharing icons to grab the attention of your audience. This helps them easily see the social sharing icons to get your content shared.
So, let’s convert these texts into social icons with the examples given below.
Normal Text Content without Any Icon
If you don’t use social share icons on your content, the text will appear as simple content which is difficult for users to identify. Your users will not find them within your content and you may lose social sharing of your content from them.
Here is the view of text without social icons:-
|
1 2 3 4 5 6 7 |
<ul class="social-sharing-icons"> <li class="facebook-share"><span class="facebook-text">Facebook</span></li> <li class="twitter-share"><span class="twitter-text">Twitter</span></li> <li class="linkedin-share"><span class="linkedin-text">Linkedin</span></li> <li class="instagram-share"><span class="instagram-text">Instagram</span></li> <li class="pinterest-share"><span class="pinterest-text">Pinterest</span></li> </ul> |
Output
The above example shows social text content that is not easier to identify inside your post content. You have to convert them into social media icons to easily identify social sharing icons inside your content.
Sp, let’s see how you can convert them into social icons in the below section.
How to Replace Text with Social Icons Using CSS
To replace text with social icons using CSS, you have to first hide the text content with display:none property. After that, you have to use the font awesome family and codes for each social media platforms as given in the example below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .social-sharing-icons span{ display:none; } .social-sharing-icons li:before{ font-family: FontAwesome; font-size: 22px; } .social-sharing-icons li.facebook-share:before{ content: '\f082'; } .social-sharing-icons li.twitter-share:before{ content: '\f099'; } .social-sharing-icons li.linkedin-share:before{ content: '\f0e1'; } .social-sharing-icons li.instagram-share:before{ content: '\f0d2'; } .social-sharing-icons li.pinterest-share:before{ content: '\f16d'; } </style> <ul class="social-sharing-icons"> <li class="facebook-share"><span class="facebook-text">Facebook</span></li> <li class="twitter-share"><span class="twitter-text">Twitter</span></li> <li class="linkedin-share"><span class="linkedin-text">Linkedin</span></li> <li class="instagram-share"><span class="instagram-text">Instagram</span></li> <li class="pinterest-share"><span class="pinterest-text">Pinterest</span></li> </ul> |
Output
When you check the result in the above example, you can easily find that it’s easier for your users to identify social icons inside your content. People come to your website content, easily find these social sharing icons, and give your more sharing of your content to different social media platform.
You May Also Like to Read
I hope you like this post on how to replace text with social media icons using CSS.