Animate Skin - Header Icons

[Average Sam]

How can I change the icons for the clans & chat menu items?

 

[Djlatino]

Those are probably images, which require you to manually edit them. You could also add a hover css which changes the color around it, but I'd need you to be more decisive of what you want changed...

Edited August 4, 2015 by Djlatino

[Average Sam]

Thanks for your reply but I'm pretty sure those are font awesome icons.

I just don't know where to change them individually. I'll probably have to add the menu items myself somewhere.

[Djlatino]

If you right click and inspect element, depending on what class it's placed in, you'd use

.fa {
  color: colorgoeshere;
}

More info:

http://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-icon-color

 

[Average Sam]

I don't want to change the colors, I want to change the icons...

[Djlatino]

welp...

my bad

 

Well, font awesome uses classes in order to specify what icon are displayed, so I'd go into your global index template and look for the boardIndex one, and change the classes to whatever glyph you want it as. I haven't upgraded to iPB4 so I don't know exactly where to go for that, but it is somewhere along the lines. 

http://fortawesome.github.io/Font-Awesome/examples/

For an example of what I just said.

http://fortawesome.github.io/Font-Awesome/icons/

For the names of the glyphs needed so that you can change them to whatever is avail.

 

However, if you're looking to change the image to something else not included in the font set, that's a bit more tricky.

[Cheerio]

just for future reference..

Font awesome is just as the name suggests ragehost, a font, so they can be manipulated like any other font right done to the basic <font color= > html.

They do however have a lot of preset arguments that can be utilized, from size to allowing custom span arguments.

example..

<li><span class="fa fa-home fa-fw" style="font-size: 15px;margin-top: 6px;margin-right:4px;">&nbsp;<a href="/">Home</a></li>

fa fa-home been the home icon and fa-fw meaning  fixed width, non stacked

<li><span class="fa fa-home fa-3x">&nbsp;<a href="/">Home</a></li>

this setting a size of 3x

you must have the fontawesome css linked also and the most up to date version to use the most icons that are added also.

latest is 4.4.0 but they're always adding to it..

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

ips probably does this already but knowing ips, they're always behind the builds.

Also be sure to refresh cache if the new icons are now showing.

 

 

what skin is this?

Animate for IPS 4

 

what skin is this?

Animate for IPS 4

looks like it's under custom.css and he's using the :before css attribute in #ipsLayout_mainNav like below..

you can see him using the font awesome fonts by their cheats code in the content like..

 

#ipsLayout_mainNav a[class*="nexus_Store"]:before{ content: "\f07a" }

which \f07a is the same as fa-shopping-cart

full list of cheat codes is avilable at http://astronautweb.co/snippet/font-awesome/

 

[Average Sam]

just for future reference..

Font awesome is just as the name suggests ragehost, a font, so they can be manipulated like any other font right done to the basic <font color= > html.

They do however have a lot of preset arguments that can be utilized, from size to allowing custom span arguments.

example..

<li><span class="fa fa-home fa-fw" style="font-size: 15px;margin-top: 6px;margin-right:4px;">&nbsp;<a href="/">Home</a></li>

fa fa-home been the home icon and fa-fw meaning  fixed width, non stacked

<li><span class="fa fa-home fa-3x">&nbsp;<a href="/">Home</a></li>

this setting a size of 3x

you must have the fontawesome css linked also and the most up to date version to use the most icons that are added also.

latest is 4.4.0 but they're always adding to it..

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

ips probably does this already but knowing ips, they're always behind the builds.

Also be sure to refresh cache if the new icons are now showing.

 

I know, I know, but all I want is to change those icons : http://i.imgur.com/PQlqicc.png into an icon of my choice.

[Cheerio]

what skin is this?

[Average Sam]

what skin is this?

Animate for IPS 4

[Average Sam]

what skin is this?

Animate for IPS 4

 

what skin is this?

Animate for IPS 4

looks like it's under custom.css and he's using the :before css attribute in #ipsLayout_mainNav like below..

you can see him using the font awesome fonts by their cheats code in the content like..

 

#ipsLayout_mainNav a[class*="nexus_Store"]:before{ content: "\f07a" }

which \f07a is the same as fa-shopping-cart

full list of cheat codes is avilable at http://astronautweb.co/snippet/font-awesome/

 

Thanks alot!

I tried adding my own line of code to the css but without any result atm.

#ipsLayout_mainNav a[class*="clans_"]:before{ content: "\f1cd" }

[James]

The question(s) in this support topic have been answered and the topic author has resolved their issue. This topic is now closed. If you have other questions, please open a new topic.