etsy

how to change the bolt icon

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:

  1. locate and click on the star icon (in this tutorial I am using the filled star instead of the outlined)
  2. 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";
The unicode always has to be placed after a backslash ( \ ) and within quote marks (" ") to work properly.
Let's see on the code how it looks. In the example below, the bolt is the one from the Slider title.


The bolt icon appears on the slider title, popular posts title, related posts title, and post comments title. You'll have to replace the Unicode number on these 4 spots. 

To find the other spots, just search for the bolt unicode:

  1. Click anywhere inside the code to enable the search
  2. use ctrl+F or cmd+F to open the search bar
  3. search for f0e7
  4. 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;

And the whole block of code will look like this (using the popular posts icon as an example here):

.PopularPosts h3:after {
  content: url('https://1.bp.blogspot.com/-TACTtyWw6FQ/YDXuCrjEubI/AAAAAAAAglE/998HEDf1cp0tMQmbNTXwOStkTqV7mdoHACLcBGAsYHQ/s128/peach-icon.png');
  display: block;
  margin: 1em auto;
}

You'll have to replace the whole block of code because some properties are different for fonts and images.
The example above is for popular posts. Below, I'll list the other spots

Slider

  1. Search for #HTML600 h3:after {
  2. 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;

So, your code from the slider bolt was like this one:

#HTML600 h3:after {
  color: $(slide.bolt.color);
  content: "\f0e7";
  display: block;
  font-family: FontAwesome;
  font-size: 15px;
  margin-top: 1.5em;
}

And after the process, it should like this one:

#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

  1. Search for .PopularPosts h3:after {
  2. repeat the process above

Related posts

  1. Search for #related-posts h4:after {
  2. Repeat the process above

Post comments

  1. Search for .comments h3:after {
  2. Repeat the process above


I don't know how familiar with codes do you are, I hope is not too confusing. Let me know if you need help with this.

Contact Form