Jump to content
Sign in to follow this  

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:


To this:


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