I used to maintain an ugly footer on my blog, then one day, it strikes me that I can apply font awesome social media icons to the footer to prettify it. And so far, I have applied it to my blog. I have posted the customized HTML code on my GitHub and in this post, I will introduce how to apply it to a WordPress Blog.
Link the Awesome CSS in HTML
Install Insert Headers and Footers Plugin
After installation, you need to go to Settings -> Insert Headers and Footers to insert the CSS link.
Append the following code to the Scripts in Header, where 33bfaa0b93 should be replaced by your own API id.
<script src="https://kit.fontawesome.com/33bfaa0b93.js"></script> <link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
By the way, this is a great plugin that not only applied in this case, it is also a great tool to insert Google AdSense Ads.
After saving the code, you are ready to go to the next step, apply the icons to the footer.
Apply Font Awesome Icons to the Footer
Go to Appearance -> Customize in Dashboard.
Go to Widgets.
Select one of the Widgets and switch it form Visual mode to Text mode, then insert Font Awesome HTML code directly.
After the modification and saving the changes, your site should be looking better.
Visualization
Before
After
Much better, right?
References
- Dependencies: https://fontawesome.com/
- Github Repository: https://github.com/Bill0412/wordpress-font-awesome-footer
- May later be applied: https://www.iconfont.cn/search/index?searchType=icon&q=豆瓣
Comments
A reader Amelia read this post and find the following fonts may be useful for commercial use.
These fonts are available at https://www.websiteplanet.com/blog/best-free-fonts/.
