Font Awesome Icons

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!
User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Font Awesome Icons

Post by Patrik iden » Sun Mar 30, 2014 9:29 pm

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

Re: Font Awesome Icons

Post by electrochrisso » Mon Mar 31, 2014 11:17 pm

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: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden » Mon Mar 31, 2014 11:41 pm

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

Re: Font Awesome Icons

Post by electrochrisso » Thu Apr 03, 2014 2:19 am

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 » Thu Jul 16, 2015 8:33 pm

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

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

Re: Font Awesome Icons

Post by Patrik iden » Fri Jul 17, 2015 2:07 am

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 » Fri Jul 17, 2015 10:44 am

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: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden » Fri Jul 17, 2015 11:59 am

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 » Fri Jul 17, 2015 12:24 pm

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: 414
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 » Wed Aug 05, 2015 4:08 pm

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: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden » Wed Aug 05, 2015 4:57 pm

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: 414
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 » Wed Aug 05, 2015 4:58 pm

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: 414
Joined: Tue Jun 24, 2014 9:06 am

Re: Font Awesome Icons

Post by mayur007 » Wed Aug 05, 2015 5:10 pm

this is what I added b4

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

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

Re: Font Awesome Icons

Post by mayur007 » Wed Aug 05, 2015 5:14 pm

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: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Font Awesome Icons

Post by Patrik iden » Wed Aug 05, 2015 5:21 pm

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.

Post Reply