Font Awesome Icons

[Patrik iden]

Hello, i just made this little but handy Extension: Font Awesome Icons. Update: you can now set individual size and color for the icons.
This Extension lets you use scalable vector icons on your Website. (useful on mobile sites that zooms in on your icons and makes them blurry.

Update: Font Awesome v.2
You can now set background color, and border settings, also you can put in a link to the icon.

2015-08-05: Some minor bugs fixed.

2015-09-03: You can now use Events. Updated to the latest Font Awesome version 4.4.0. You can now turn of the Font Awesome script in case you are using multiple icons, so that you are not loading multiple scripts.

Download v.2.2: https://mega.nz/#!lwE1FDgJ!c7DasozitgFu ... hF-s1LqPp0


You can read more about Font Awesome here: http://fortawesome.github.io/Font-Awesome/

And use this Cheatsheet to change the name of the icon in the Extension settings: http://fortawesome.github.io/Font-Awesome/cheatsheet/


Demo: http://test3.fcab.se/fontawesome/

[electrochrisso]

Hi Patrik, this looks like a great extension, I have not looked but I assume the extension is in the extension manager, as I can not see a link in your post.
Thanks for Sharing.

[Patrik iden]

Hi Patrik, this looks like a great extension, I have not looked but I assume the extension is in the extension manager, as I can not see a link in your post.
Thanks for Sharing.

The link is at the bottom of the post.

[electrochrisso]

Ah, I see I was looking in font-awesome-4.0.3.zip, I did not look in the Font_Awesome_Icons.rar
Thankyou

[mixthemix]

Doesn't seem to work in V10, could do with this, any help please ?

[Patrik iden]

It works for me. You will have to publish your page to see the icon.

[mixthemix]

It works for me. You will have to publish your page to see the icon.

Hi I am sorry I hadn't published, is there any way to show in preview ? that way it is easier to align & size, many thanks.

[Patrik iden]

It works for me. You will have to publish your page to see the icon.

Hi I am sorry I hadn't published, is there any way to show in preview ? that way it is easier to align & size, many thanks.

No

[mixthemix]

It works for me. You will have to publish your page to see the icon.

Hi I am sorry I hadn't published, is there any way to show in preview ? that way it is easier to align & size, many thanks.

No

OK, Thank You Anyway

[mayur007]

I have updated to the latest version
but I also want to add the hover effect

How to do that ?

[Patrik iden]

I have updated to the latest version
but I also want to add the hover effect

How to do that ?

You can add this code in an HTML box on your page:

Code: Select all

<style>
.fa.fa-camera-retro:hover 
{
    color: #ff0000;
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    transform:scale(1.05);
}
</style>

Add any style/effect you want. And you wil have to look in your sorce code and change the fa-camera-retro to what ever icon you are using.

[mayur007]

hover for icon color

.fa.$icon$
{
color: $iconcolor$;

I want to add a hover to this

eg.. http://www.html5up.net/prologue

social icon at footer have hover

[mayur007]

this is what I added b4

.fa.$icon$:hover {
color: $iconcolors$;
}

[mayur007]

I have updated to the latest version
but I also want to add the hover effect

How to do that ?

You can add this code in an HTML box on your page:

Code: Select all

<style>
.fa.fa-camera-retro:hover 
{
    color: #ff0000;
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    transform:scale(1.05);
}
</style>

Add any style/effect you want. And you wil have to look in your sorce code and change the fa-camera-retro to what ever icon you are using.

Thanx but
If I want to change the hover color in the wysiwyg extension ?

to hover I have edit the builder again and again

.fa.$icon$:hover {
color: #ff0000;
-webkit-transform:scale(2);
-moz-transform:scale(2);
transform:scale(2);
}

have changed to this

[Patrik iden]

I have made an update. Please download verion 2.1 from the start of this post. or from here: https://mega.nz/#!0o9QjaxJ!dJIlhfO0oXH6 ... ljlwmXLzDs
In the Extension settings you will now have a Hovereffects property, in this property you can add css code like:

Code: Select all

color: #ff0000;
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
transform:scale(1.05);

Don not add the <style></style> and {} tags, only the code should be added.

[mayur007]

thanx yes its working like a charm



here is the the updated version of fontawesome and with my project which I tried to add

https://www.dropbox.com/s/ujlx8z9dg95b4 ... 0.rar?dl=0

Its has a newer version link of font awesome which is 4.4.0 so you can update your thread

Thanx again

[Patrik iden]

Thank's. I also made some minor bug fixes now. Download again please.

[mayur007]

Thanx I ll download..

[mayur007]

Hi

Can you add the event function in this too ?

Thanx

[Patrik iden]

Hi

Can you add the event function in this too ?

Thanx

I'l see what i can do.

[Patrik iden]

Hi

Can you add the event function in this too ?

Thanx

OK, It's done. Try it now please. Download from first post.

[mayur007]

Awesome
Thanx again

[naftalina]

Thanks! This very useful!

[Patrik iden]

Thank's guys, you may also like this one: viewtopic.php?f=42&t=68464

[rusadvertizer]

Can u reload it, pls?
In topic start link doesnt work.

[Patrik iden]

Can u reload it, pls?
In topic start link doesnt work.

The link works for me. but i uploaded a new one any way, so try it now.