Categories

Featured templates

WordPress. How to add icons for social links (when they are set with text)

Nicole Hallman August 11, 2015
Rating: 4.0/5. From 2 votes.
Please wait...

This tutorial will show you how to add icons for social links in WordPress (when they are set with text by default).

WordPress. How to add icons for social links (when they are set with text)

Social links may be represented either with the text or with icons. In some templates the links show up as text and there is no option to replace the text with icons in WordPress dashboard:

wordpress_how_to_add_an_icons_for_social_links_1

This may seem a real problem if you don’t have a roadmap to what should be done. That’s why we’re happy to present you this tutorial.

In order to add icons for social links of your WordPress website, please follow the steps listed below:

Adding FontAwesome icons:

  1. First of all, you need to add icons. This can be done with the help of css rules. To add the rules, please log into your WordPress admin panel and navigate to Appearance -> Editor tab. Open style.css file and scroll to the end of the file.

  2. You need to create rules that use selectors for titles of social links and ::before css element. The rules will look the following way:

    [title="facebook"]::before {
      content: "" !important;
      font-family: FontAwesome !important;
      font-size: 40px !important;
    }
    

    In the ” ” of the property content: you need to insert a FontAwesome icon. To do this, you need to find and copy-paste the icon from FontAwesome 3.2.1 Cheatsheet inside the ” “. (Please note that you need to copy the icon itself, not the code for it):

    wordpress_how_to_add_an_icons_for_social_links_2

    In this rule you can also define the font size of the icons. For instance, we will set it to 40px with the css property font-size: 40px !important;.

  3. Now you need to create rules for the rest of the social links that are used in the template. Copy-paste the rule as many times as needed and change the social link title in [title=”facebook”] selector. Then copy-paste icons that you need from FontAwesome 3.2.1 Cheatsheet to content: “” !important;. You will get the rules as follows:

    [title="twitter"]::before {
      content: "" !important;
      font-family: FontAwesome !important;
    font-size: 40px !important;
    }
    
    [title="instagram"]::before {
      content: "" !important;
      font-family: FontAwesome !important;
    font-size: 0px !important;
    }
    
    [title="google"]::before {
      content: "" !important;
      font-family: FontAwesome !important;
    font-size: 40px !important;
    }
    
  4. When you are done adding rules, click on Update File button to save changes:

    wordpress_how_to_add_an_icons_for_social_links_3

Deleting the text of social links

  1. Open the file static-social-networks.php in Appearance -> Editor tab of your WordPress admin panel.

  2. With the help of Ctrl + F search function locate the following line (closer to the end of the file):

    echo $social_networks[$i];
    

    wordpress_how_to_add_an_icons_for_social_links_4

  3. Please delete this line.

  4. Click on Update File button to save changes.

Refresh your website to see the icons that represent social links on your website:

wordpress_how_to_add_an_icons_for_social_links_5

Now you know how to add icons for social links in WordPress (when they are set with text by default).

Feel free to check the detailed video tutorial below:

WordPress. How to add icons for social links (when they are set with text)

Wordpress Premium Templates
This entry was posted in WordPress Tutorials and tagged icon, link, social, WordPress. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket