We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Adding Custom Icons With CSS | Forum

Rob R
Rob R Sep 8 '14
I thought I'd share this great way of adding custom icons with CSS.  I am using the Facebook Go theme and this is particularly helpful when a third-party plugin is installed creating a new menu button that needs an icon.  Big thanks to Purusothaman Ramanujam for teaching this to me when I asked him how I can add an icon to his Extended Events plugin menu item.

Here is the css for this particular menu item you can use as a template:

.ow_main_menu .eventx_main_menu_item{
background: url(images/main_event.png)no-repeat 10px center ; }

.ow_main_menu .eventx_main_menu_item:hover,
.ow_main_menu .eventx_main_menu_item.active {
background-image: url(images/main_event.png)no-repeat 10px center; }

You can use firebug or other element analyzer in your browser to determine what the menu class is for the item you want a custom icon for.  In this case a class called into a <li> element eventx_main_menu_item.

Note that url(images/main_event.png) is located in \ow_userfiles\themes\images\ and NOT in your static or themes images folders.

Thanks again Purus and hopefully others find this helpful.
Rob R
Rob R Sep 8 '14
Forgot to mention this works with "ic_" icons as well not just menu "main_" items.  Here is an example of changing the "ic_info" icon to something else (in this case the same icon I was using for the Extended Events example above):

html body div .ow_ic_info{
background: url(images/main_event.png)no-repeat 10px center ; }

Note though that as far as I can tell, this is basically the same thing as physically replacing the icon images in the static and themes images folders.  I guess just a cleaner way to do it though.
The Forum post is edited by Rob R Sep 9 '14