Font Awesome Icons

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Font Awesome Icons

Post by 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/
Last edited by Patrik iden on Tue Oct 20, 2015 1:30 pm, edited 12 times in total.
electrochrisso
 
 
Posts: 43
Joined: Mon Aug 19, 2013 8:39 am
Location: Darling River

Re: Font Awesome Icons

Post by 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. :)
WYSIWYG THE GREATEST Web Builder EVER
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

electrochrisso wrote: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
 
 
Posts: 43
Joined: Mon Aug 19, 2013 8:39 am
Location: Darling River

Re: Font Awesome Icons

Post by 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 :)
WYSIWYG THE GREATEST Web Builder EVER
mixthemix
 
 
Posts: 4
Joined: Fri Jul 08, 2011 10:41 pm
Contact:

Re: Font Awesome Icons

Post by mixthemix »

Doesn't seem to work in V10, could do with this, any help please ?
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

It works for me. You will have to publish your page to see the icon.
mixthemix
 
 
Posts: 4
Joined: Fri Jul 08, 2011 10:41 pm
Contact:

Re: Font Awesome Icons

Post by mixthemix »

Patrik iden wrote: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.
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

mixthemix wrote:
Patrik iden wrote: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
 
 
Posts: 4
Joined: Fri Jul 08, 2011 10:41 pm
Contact:

Re: Font Awesome Icons

Post by mixthemix »

Patrik iden wrote:
mixthemix wrote:
Patrik iden wrote: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
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

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

How to do that ?
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

mayur007 wrote: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.
Last edited by Patrik iden on Wed Aug 05, 2015 5:05 pm, edited 1 time in total.
mayur007
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by 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
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

this is what I added b4

.fa.$icon$:hover {
color: $iconcolors$;
}
mayur007
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

Patrik iden wrote:
mayur007 wrote: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
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by 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.
Last edited by Patrik iden on Wed Aug 05, 2015 5:49 pm, edited 2 times in total.
mayur007
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

thanx yes its working like a charm

:D :D :)

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
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

Thank's. I also made some minor bug fixes now. Download again please.
mayur007
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

Thanx I ll download..

:D
mayur007
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

Hi

Can you add the event function in this too ?

Thanx
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

mayur007 wrote:Hi

Can you add the event function in this too ?

Thanx
I'l see what i can do.
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

mayur007 wrote:Hi

Can you add the event function in this too ?

Thanx
OK, It's done. Try it now please. Download from first post.
mayur007
 
 
Posts: 285
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 »

Awesome
Thanx again :D
naftalina
 
 
Posts: 249
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: Font Awesome Icons

Post by naftalina »

Thanks! This very useful! :)
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

Thank's guys, you may also like this one: viewtopic.php?f=42&t=68464
rusadvertizer
 
 
Posts: 1
Joined: Tue Oct 20, 2015 12:22 pm

Re: Font Awesome Icons

Post by rusadvertizer »

Can u reload it, pls?
In topic start link doesnt work. :cry:
User avatar
Patrik iden
 
 
Posts: 479
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden »

rusadvertizer wrote:Can u reload it, pls?
In topic start link doesnt work. :cry:
The link works for me. but i uploaded a new one any way, so try it now.
Post Reply