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:<\/p>\r\n
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.<\/p>\r\n In order to add icons for social links of your WordPress website, please follow the steps listed below:<\/p>\r\n 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<\/strong> -> Editor<\/strong> tab. Open style.css<\/strong> file and scroll to the end of the file.<\/p>\r\n<\/li>\r\n You need to create rules that use selectors for titles of social links and ::before<\/strong> css element. The rules will look the following way:<\/p>\r\n In the ” ” of the property content:<\/strong> 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<\/a> inside the ” “. (Please note that you need to copy the icon itself, not the code for it):<\/p>\r\n 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;<\/strong>.<\/p>\r\n<\/li>\r\n 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”]<\/strong> selector. Then copy-paste icons that you need from FontAwesome 3.2.1 Cheatsheet<\/a> to content: “\uf082” !important;<\/strong>. You will get the rules as follows:<\/p>\r\n When you are done adding rules, click on Update File<\/strong> button to save changes:<\/p>\r\n Open the file static-social-networks.php<\/strong> in Appearance<\/strong> -> Editor<\/strong> tab of your WordPress admin panel.<\/p>\r\n<\/li>\r\n With the help of Ctrl + F search function locate the following line (closer to the end of the file):<\/p>\r\n Please delete this line.<\/p>\r\n<\/li>\r\n Click on Update File<\/strong> button to save changes.<\/p>\r\n<\/li>\r\n<\/ol>\r\n Refresh your website to see the icons that represent social links on your website:<\/p>\r\n![\"wordpress_how_to_add_an_icons_for_social_links_1\"](\"\/help\/wp-content\/uploads\/2015\/08\/wordpress_how_to_add_an_icons_for_social_links_1-300x169.jpg\"){kind=icon}
<\/a><\/p>\r\nAdding FontAwesome icons:<\/h3>\r\n
\r\n
\r\n[title=\"facebook\"]::before {\r\n content: \"\uf082\" !important;\r\n font-family: FontAwesome !important;\r\n font-size: 40px !important;\r\n}\r\n<\/pre>\r\n![\"wordpress_how_to_add_an_icons_for_social_links_2\"](\"\/help\/wp-content\/uploads\/2015\/08\/wordpress_how_to_add_an_icons_for_social_links_2-300x169.jpg\"){kind=icon}
<\/a><\/p>\r\n\r\n[title=\"twitter\"]::before {\r\n content: \"\uf081\" !important;\r\n font-family: FontAwesome !important;\r\nfont-size: 40px !important;\r\n}\r\n\r\n[title=\"instagram\"]::before {\r\n content: \"\uf16d\" !important;\r\n font-family: FontAwesome !important;\r\nfont-size: 0px !important;\r\n}\r\n\r\n[title=\"google\"]::before {\r\n content: \"\uf0d4\" !important;\r\n font-family: FontAwesome !important;\r\nfont-size: 40px !important;\r\n}\r\n<\/pre>\r\n<\/li>\r\n![\"wordpress_how_to_add_an_icons_for_social_links_3\"](\"\/help\/wp-content\/uploads\/2015\/08\/wordpress_how_to_add_an_icons_for_social_links_3-300x169.jpg\"){kind=icon}
<\/a>\r\n<\/li>\r\n<\/ol>\r\nDeleting the text of social links<\/h3>\r\n
\r\n
\r\necho $social_networks[$i];\r\n<\/pre>\r\n
![\"wordpress_how_to_add_an_icons_for_social_links_4\"](\"\/help\/wp-content\/uploads\/2015\/08\/wordpress_how_to_add_an_icons_for_social_links_4-300x169.jpg\"){kind=icon}
<\/a>\r\n<\/li>\r\n
![\"wordpress_how_to_add_an_icons_for_social_links_5\"](\"\/help\/wp-content\/uploads\/2015\/08\/wordpress_how_to_add_an_icons_for_social_links_5-300x169.jpg\"){kind=icon}
<\/a><\/p>\r\n