The Enjoy theme uses the Font Awesome font to display all the icons. There are many versions of this font, but the version used in this theme is 4.7.0. You can visit the 4.7.0 page here.
How to add an icon to the theme
There are 2 ways to add an icon from the Font Awesome: by the Unicode number or by the HTML tag. In this tutorial, we'll use the one that uses the Unicode, since the bolt icons are placed on the CSS and not on the HTML.
Finding the Unicode number
Visit the Font Awesome 4.7.0 (link above), you will find all the icons the 4.7 version has. Let's suppose you want to change the bolt for a star:
- locate and click on the star icon (in this tutorial I am using the filled star instead of the outlined)
- once you are on the star icon page, locate and copy the Unicode number below the stars icon, it starts with an f
Replacing the icon
You'll replace the Unicode number on the css line where says content:
It looks like this:
content: "\f0e7";
To find the other spots, just search for the bolt unicode:
- Click anywhere inside the code to enable the search
- use ctrl+F or cmd+F to open the search bar
- search for f0e7
- replace it with the icon Unicode number that you did choose
Using icons that it's not from the Font Awesome
The Font Awesome icons list can be pretty limited if you are looking for cute icons. Luckily, you can use .gif or .png icons instead. The process is the same, but instead of using a Unicode number, you'll host your icon and copy the URL of it.
(you can upload your icon on a draft post on your blog and copy the link. No need to publish the post, it will be hosted if you keep the post in a draft)
The "content" line will be a bit different than the previous one:
content: url(https://1.bp.blogspot.com/-TACTtyWw6FQ/YDXuCrjEubI/AAAAAAAAglE/998HEDf1cp0tMQmbNTXwOStkTqV7mdoHACLcBGAsYHQ/s128/peach-icon.png) no-repeat;
.PopularPosts h3:after { content: url('https://1.bp.blogspot.com/-TACTtyWw6FQ/YDXuCrjEubI/AAAAAAAAglE/998HEDf1cp0tMQmbNTXwOStkTqV7mdoHACLcBGAsYHQ/s128/peach-icon.png'); display: block; margin: 1em auto; }
The example above is for popular posts. Below, I'll list the other spots
Slider
- Search for #HTML600 h3:after {
- Select and replace the whole code inside it with the code ahead
content: url('https://1.bp.blogspot.com/-TACTtyWw6FQ/YDXuCrjEubI/AAAAAAAAglE/998HEDf1cp0tMQmbNTXwOStkTqV7mdoHACLcBGAsYHQ/s128/peach-icon.png'); display: block; margin: 1em auto;
#HTML600 h3:after { color: $(slide.bolt.color); content: "\f0e7"; display: block; font-family: FontAwesome; font-size: 15px; margin-top: 1.5em; }
#HTML600 h3:after { content: url('https://1.bp.blogspot.com/-TACTtyWw6FQ/YDXuCrjEubI/AAAAAAAAglE/998HEDf1cp0tMQmbNTXwOStkTqV7mdoHACLcBGAsYHQ/s128/peach-icon.png'); display: block; margin: 1em auto; }
Popular posts
- Search for .PopularPosts h3:after {
- repeat the process above
Related posts
- Search for #related-posts h4:after {
- Repeat the process above
Post comments
- Search for .comments h3:after {
- Repeat the process above