Jump to content
TheHost4U - Webmaster Resources
Sign in to follow this  
theboss

Add icon in Side Block title using css

Recommended Posts

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...