Change Awesome Icons?

Hello

The enigma theme support only Font Awesome CSS 3.2.1

So you can use only Font Awesome 3.2.1 icons.

I will provide latest Font Awesome package in next update.

Please be wait for next updated version.

Thanks

Ohey, take a look at the Font Awesome Cheatsheet. It provides you with the icon codes for version 3.2.1. You can use those codes in your custom CSS, where you would simply put something like this:

.fa-envelope:before{
	content:"\f0b1";
}

You won’t need the full code, just the four bits between x and ; which you then append to a backslash \ like I did in the example above.

Thank you both for taking the time to assist and pointinmg me to the Awesome font codes, but what I am actually getting at is how to change them in the theme.

If you put the .fa code into your child style sheet it does nothing, only when you put the new code in LIVE does it work.

Where is the reference fa fa-wordpress located, if I knew this then I could swap out the icon with any other from the cheatsheet. I can find other icons referenced such as for the social networks but nothing for the Services.

Enigma declares all the icons in wp-content/themes/enigma/style.css, but if you edit that, all your changes will be gone as soon as you update Enigma.

See if this changes something in your child stylesheet:

.fa-envelope:before{
	content:"\f0b1" !important;
}

Some documentation on these icons and their usage would be nice.. I can’t get them to work at all!

Do they need “fa fa-” before the font awesome name?? I can’t get them to work either way…

Check the icon in Firebug or Chrome Dev Tools and you will see how they are being declared in your theme. If you check the envelope in Enigma in Dev Tools, you will see that its CSS selector is “.fa-envelope:before”. Check the icon you’re trying to swap, and Dev Tools will give you the selector you need.

If you have Enigma running, then no, all you need is “.fa-envelope:before” or whatever element you are trying to change. If you have a different theme than Enigma, you’ll find out what you need by checking in Dev Tools.

If that won’t work for you, would you provide a link to your website so we could check it out?

Hi, Where in the enigma style.css file does it do that?

I’ve just checked the file again and apart from function calls in the Services section (.enigma_service_iocn) there is only one place Awesome appears as a font family for the sidebar.

None of the code states which specific icon to use other than specifying the container area and any font sizes and styles, but that actual icon that is used is not there, namely that would be fa-google, fa-harddisk and fa-wordpress I think, from memory.

Then look at the site of another forum poster at https://spukanostaklo.com/ and that person has changed the icons, how did they do it? I might try and ask him/her.

Please post here is you get any nearer to teh answer,

Thanks again

Hi emilyTK, okay lets say the WP site is up and running and you’re using the Firefox browser. You right click on one of the icons and select Inspect Element, which then avtivates Firebug and you see the code specific to that icon. The code is thus in the ~Inspector window:

<i class=”fa fa-wordpress”></i>

You highlight the following ‘wordpress’ and replace it with ‘envelope’. This is what I mean by editing the file Live. Instantly the wordpress icon is replaced with the letter icon. This works fine no problem with that.

I would like it so that when I make this change it is permanent and not just for the live session. For this you would need to swap out the specific icon reference wherever it is located. I can’t find it in any php or css file for the enigma theme.

Has anyone actually been successful in changing the Service icons?

I believe the designer is using bootstrap to manage his font libraries and therefore the references would be in the javascript. But it looks like I will change theme as I don’t think I want to go through the js.

hi jsnowbusiness, various sets are available from Font Awesome, which are version 4.2.0. The theme author tells us he used version 3.2.1. The webkit used on the developers side doesn’t matter as you can call any icon whichever version if you know its name. There is some explanations on their site in the way of documentation.

Obviously people using this theme will want to change the icons, for example why would you want a WordPress icon unless it is relevant.

If I figure it out I’ll post it here.

Ah, now I understand.
Well, yes, like you said the other poster has swapped the entire class name. I can only guess that one can do this in the admin panel, for instance when you edit the html output of your front page in the page editor. I’m almost a 100% certain that you won’t need JavaScript or CSS for this.
But you’re right: Someone who actually used Enigma should elaborate on this one. And this isn’t me. I didn’t actually use it, so I don’t know how the admin panel looks in there.

It goes like this though: Enigma is relying on Bootstrap, and Bootstrap is relying on Font Awesome (in this case: Font Awesome 3.2.1). The way it does so is the way I described above, in my first post.

Since the other poster has done little work on that site I bet that’s the setup that was installed, maybe different icons came with the language choice on installation.

The thing is the html that you see when you inspect elements in Firebug does not physically exist outside of that environment as it is generated at the browser, the PHP tags do that, so you wont see that same HTML when you look at a theme files.

I bet everyone with this theme will hit this problem at some point. My logic is if the icon is specified in the live HTML then the code must have used a pointer to reference that database or library. I will have a brief look at the js files. It would be nice if the theme author put me out of my misery, I’m so hungry.

Thisnamedoesnotexistattempt31,

Forgive me if I’m being dumb… but you say you just want to change the icons… Have you tried:

Appearance > Theme Options > Service Option tab??

LMAO

My issue was that I was entering “fa fa-icon-gears” when it just needed “fa fa-gears”, so now everything is good on my end – got my icons changed to what I wanted!

100% jsnowbusiness, I went through all the js files and you found it right there, I didn’t even see the service icons thing, it was there all along.

You’re a genius, and I’m a fool –

Thanks for that!

Sweet! Be a darling and mark this thread as resolved. ??

@ Thisnamedoesnotexistattempt31 : Can I mark this TIcket to CLOSE .

@jsnowbusiness AND @emilytk THANKS allot ?? for you response .