Jump to content
Sign in to follow this  
theboss

Add icon in Side Block title using css

Recommended Posts

theboss    13

Here will show you how to add FontAwsome icon into the sideblock title using css

So that we go from this:

blocks1.jpg.729410c7fdac7778a24ddd2b1e5c

To this:

blocks1a.jpg.6337128c0f0f772b41bc846544b

As you can see in this example we are using the Forum Statistics and Blog Statistics in the side blocks (it can be any block and doesn't have to be in the side column as long as you know the block title)

Need to go into AdminCP >> customizations >> themes >> far right of your theme name click the Edit HTML/CSS button >> CSS tab >> custom.css

Then we add the following:

[data-blocktitle] h3:before {
  font-family: FontAwesome;
  padding-right: 10px;
}

[data-blocktitle="Forum Statistics"] h3:before {
  content: "\f1fe";
}

[data-blocktitle="Blog Statistics"] h3:before {
  content: "\f201";
}

The first part is saying use FontAwesome and give a padding for all the blocktitles

The other two parts are saying which FontAwesome image to use and for which block title (you can use your own of course ... more found at FontAwesome website)

Once added yours then click the Save button and go back to browser and refresh page and should end up with similar to my 2nd screenie

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×