www.wysiwygwebbuilder.com

WYSIWYG Web Builder
http://forum.wysiwygwebbuilder.com/

Font Awesome Icons

http://forum.wysiwygwebbuilder.com/viewtopic.php?t=61232

Page 1 of 1

Font Awesome Icons

Posted: Sun Mar 30, 2014 9:29 pm
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/

Re: Font Awesome Icons

Posted: Mon Mar 31, 2014 11:17 pm
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. :)

Re: Font Awesome Icons

Posted: Mon Mar 31, 2014 11:41 pm
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.

Re: Font Awesome Icons

Posted: Thu Apr 03, 2014 2:19 am
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 :)

Re: Font Awesome Icons

Posted: Thu Jul 16, 2015 8:33 pm
by mixthemix
Doesn't seem to work in V10, could do with this, any help please ?

Re: Font Awesome Icons

Posted: Fri Jul 17, 2015 2:07 am
by Patrik iden
It works for me. You will have to publish your page to see the icon.

Re: Font Awesome Icons

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

Re: Font Awesome Icons

Posted: Fri Jul 17, 2015 11:59 am
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

Re: Font Awesome Icons

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

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 4:08 pm
by mayur007
I have updated to the latest version
but I also want to add the hover effect

How to do that ?

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 4:57 pm
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.

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 4:58 pm
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

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 5:10 pm
by mayur007
this is what I added b4

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

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 5:14 pm
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

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 5:21 pm
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.

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 5:34 pm
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

Re: Font Awesome Icons

Posted: Wed Aug 05, 2015 5:52 pm
by Patrik iden
Thank's. I also made some minor bug fixes now. Download again please.

Re: Font Awesome Icons

Posted: Thu Aug 06, 2015 1:52 pm
by mayur007
Thanx I ll download..

:D

Re: Font Awesome Icons

Posted: Thu Sep 03, 2015 7:50 pm
by mayur007
Hi

Can you add the event function in this too ?

Thanx

Re: Font Awesome Icons

Posted: Thu Sep 03, 2015 9:01 pm
by Patrik iden
mayur007 wrote:Hi

Can you add the event function in this too ?

Thanx
I'l see what i can do.

Re: Font Awesome Icons

Posted: Thu Sep 03, 2015 9:25 pm
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.

Re: Font Awesome Icons

Posted: Thu Sep 03, 2015 10:25 pm
by mayur007
Awesome
Thanx again :D

Re: Font Awesome Icons

Posted: Sat Oct 17, 2015 5:22 am
by naftalina
Thanks! This very useful! :)

Re: Font Awesome Icons

Posted: Sat Oct 17, 2015 10:00 am
by Patrik iden
Thank's guys, you may also like this one: viewtopic.php?f=42&t=68464

Re: Font Awesome Icons

Posted: Tue Oct 20, 2015 12:25 pm
by rusadvertizer
Can u reload it, pls?
In topic start link doesnt work. :cry:

Re: Font Awesome Icons

Posted: Tue Oct 20, 2015 1:30 pm
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.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited