usage of Font Awesome icons #127

Closed
OlegKi opened this Issue Dec 14, 2012 · 36 comments

Projects

None yet

4 participants

@OlegKi
OlegKi commented Dec 14, 2012

Hello!

What do you think about the usage of Font Awesome icons at least as additional option? It could be a cool feature.

Look at here for an example of advantages of usage Font Awesome icons in jqGrid which is jQuery plugin which is oriented on jQuery UI Themes CSS. In the referenced answer I had to change some CSS classes from the standard jQuery UI Theme to the corresponding Font Awesome classes. If it would be exist some jQuery UI Themes (like youth for example) then it would be enough just use the jQuery UI Theme. It would be cool!

Best regards
Oleg

@njy
njy commented Dec 14, 2012

I've integrated FontAwesome in the app i'm developing with great success, with both jQuery UI and Bootstrap.

The bootstrap guys talks about problems with IE7, if i remember correctly, but they were talking about GlyphIcons, not FontAwesome. In any case, i'll take a shot at it.

@OlegKi
OlegKi commented Dec 14, 2012

@njy: I don't tested Font Awesome with IE7 myself, but the Font Awesome v2.0 now supports IE7 (see here). There are special font-awesome-ie7.css which can be inserted for example with the code like

<!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.css">
<![endif]-->

Moreover it's not really required to use neither Bootstrap nor LESS to be able to use Font Awesome. So everybody who use jQuery UI only can use the fonts. See for example the demo which I referenced. It uses only font-awesome.css.

@gtraxx
Member
gtraxx commented Dec 14, 2012

Hello, I'm testing with Awesome Font and everything works fine.
View issues :
#112
:)

@OlegKi
OlegKi commented Dec 14, 2012

@gtraxx: Sorry, but probably I understand you not exactly. I supposed that jQuery UI Bootstrap Theme can be used without Bootstrap or LESS. It seems that it can be used just like any other jQuery UI Theme.

The issues #112 seems to me like pure discussion in context of LESS.

All images used in original jQuery UI Themes distributed by jQuery UI contains PNG files. The home page of jQuery UI Bootstrap has the same disadvantage. If I look at the page with zoom 400% for example the icons looks not attractive.

What I search is some jQuery UI Theme which uses Font Awesome icons in the CSS. Your project jQuery UI Bootstrap seems be at the first look mostly close to the goal, but to be able to use vector icons one need to have jquery-ui-1.9.2.custom.css where all icon classes (ui-icon-carat-1-n, ui-icon-carat-1-ne etc) are implemented not like here using url(images/ui-icons_222222_256x240.png). Instead of that one need to use url('../font/fontawesome-webfont.eot') and for example something like { content: "\f0d8"; } (see here the definition of the class icon-caret-up of Fort Awesome which corresponds to ui-icon-carat-1-n from jQuery UI). Mostly different names of classes from Font Awesome CSS and jQuery UI CSS is the problem.

In the way one could provide jQuery UI Theme with vector icons. So everybody who has existing solution which uses jQuery UI Theme (for example everybody who use jqGrid) could bust include the Theme to have advantage of perfect scaleable icons.

Regards
Oleg

@njy
njy commented Dec 14, 2012

@OlegKi

Moreover it's not really required to use neither Bootstrap nor LESS to be able to use Font Awesome

Yeah, i know, but since we are talking about "jQuery UI Bootstrap" (emphasys mine) i was just pointing out possible problems.

Anyway, i'm using it with both bootstrap and jquery ui, and it seems to work just very very fine.

Cheers

@addyosmani
Member

My position is that we're generally now targeting IE8+ in terms of support on that front, but it's good to hear that Font Awesome works on older browsers too. I'd be happy for us to land support for it if we can get a pull request in.

@gtraxx is this something you feel comfortable landing based on your current tests or do you need more help with it?

@OlegKi
OlegKi commented Dec 14, 2012

@addyosmani: The support of IE7 is not important for me. It's just nice to have feature. My main question was: is it possible to use vector icons (Font Awesome icons) instead of raster icons from PNG pictures used currently. The most interest have pure CSS solution.

@njy
njy commented Dec 14, 2012

👍 to let IE7 die slowly and painfully, if it causes any kind of pain

@addyosmani
Member

I think it's definitely possible and I'd be happy for us to move in the direction of using vector icons.

@gtraxx
Member
gtraxx commented Dec 17, 2012

@addyosmani The integration "Font Awesome" with "jquery ui" should not be a problem few lines to add to the CSS.
I put in the work to do ;)

@addyosmani
Member

Excellent! Thanks :)

@OlegKi
OlegKi commented Dec 17, 2012

Thank you very much!

@addyosmani
Member

@gtraxx Did we integrate Font Awesome the last time we looked into this? If not, have you already done this locally or would you like to see if someone else on this thread could help?

@gtraxx
Member
gtraxx commented Jan 18, 2013

Hi @addyosmani , I already do local testing.
Question:
Should I replace the original use of icons or use jQuery UI Font Awesome extra?
It is very important :)

@addyosmani
Member

I would like to maintain parity with Bootstrap itself where possible. Just checked and they're using glyphs. How about we use Font Awesome extra and consider making it a default after the next release if people want it? :)

@gtraxx
Member
gtraxx commented Jan 18, 2013

ok, I'll work :)

@addyosmani
Member

Thanks!

@gtraxx
Member
gtraxx commented Jan 30, 2013

Hi @addyosmani ,
I will send the changes to work with "Font Awesome".

Example :

$("#mybutton").button({
       text: false,
       icons: {
        primary: "icon-github"
       }
});

You can always work with jQuery UI icons without problem
I send changes tonight :D

@gtraxx
Member
gtraxx commented Jan 30, 2013

"Font awesome" work with split button, button with icons and toolbar (3c39a0c)
👍

@addyosmani
Member

Yay! that is really awesome. Thanks for checking!

@gtraxx
Member
gtraxx commented Jan 30, 2013

New demo with "Font Awesome" in extra page (http://addyosmani.github.com/jquery-ui-bootstrap/extra.html)
I added a note in the css file and fixed some bugs :)

@addyosmani
Member

Ahhhh. I love them. Great work, @gtraxx! :)

@addyosmani
Member

Hey, wanna update the copyright notice at the bottom + readme to include your name? You're practically co-maintainer right now.

@gtraxx
Member
gtraxx commented Jan 31, 2013

Yes, but what can I write?
Aurélien Gérits co-maintainer ?
:)

@gtraxx
Member
gtraxx commented Jan 31, 2013

Hi @addyosmani ,
I made the changes in the footer :)
Is that correct ?

Do you want to change the README?
Can I add a changelog :)

@OlegKi
OlegKi commented Jan 31, 2013

Thank you for very good job!

I have to mention that one need change a little the value of margin-left for the icons on the page.

One additional problem why I wrote my original suggestion here was the problem that Font Awesome don't provide full set of all jQuery UI icons. I posted for example the new icon request which was unanswered.

I find the idea of your project (jQuery UI Bootstrap) and the idea of Font Awesome very interesting and very helpful. The only problem is that jQuery UI Bootstrap uses raster icons based of PNG files and Font Awesome has another priority in the choice of new icons. How one can see from the post creating of new vector icons with respect of tools like Adobe Illustrator seems be not so complex. It would be very good if you consider in the future to provide full set of scalable jQuery UI icons as the part of jQuery UI Bootstrap Theme. It would makes the jQuery UI Bootstrap more attractive and more helpful. In the case jQuery UI Bootstrap could be the first jQuery UI Theme with the feature.

Best regards
Oleg

@gtraxx
Member
gtraxx commented Jan 31, 2013

Hi, OlegKi,

I have to mention that one need change a little the value of margin-left for the icons on the page.

Could you send me a screenshot for changing the margin (with any browser + OS)

For the moment "are awesome" is supported and can be used instead of PNG icons but there is small problem identified, which requires a modification of the CSS (see the last lines of CSS jquery ui bootstrap, j 'I wrote a note + tips).

In future versions, png icons are removed and replaced with vector (vector font).
I analyze the possibilities.

Best regards :)

@OlegKi
OlegKi commented Jan 31, 2013

Hi Gerits,

on my Windows 7 computer the page displays

chrome

in Chrome v.24 and in IE9 as

chrome

I used 300% scaling in both cases to show more clear the problem.

I's very good news that you plan in the future replace all png icons to vector font.

Best regards
Oleg

@gtraxx
Member
gtraxx commented Jan 31, 2013

ok I'll check and fix bug :)

@gtraxx gtraxx was assigned Jan 31, 2013
@addyosmani
Member

Is this good to close?

@gtraxx
Member
gtraxx commented Feb 17, 2013

I need to replace the UI icons with Font awesome.
I progressing well but I check if all the icons are available ;)

@addyosmani
Member

Cool. Let me know if you need any help. I remember us running into some issues with margin before.

@gtraxx
Member
gtraxx commented Apr 16, 2013

I expect that the icons are all available
Tests with "Font Awesome" function but it lacks icons

@OlegKi
OlegKi commented Apr 17, 2013

Probably it was an misunderstanding at the beginning. If I would found all vector icons which I need for jQuery UI in the list of all icons which already provides "Font Awesome" I would solve the problem myself. Tree months before I posted small feature request to Font-Awesome about one simple icon which I needed mostly, but the request are still unanswered.

If I understand the problem correctly, the creating of vector icons is not so complex if one uses corresponding tools (see "Contribute Icons to Font Awesome" part here where it's described the usage of Adobe Illustrator). What Font-Awesome use is mostly web font in format woff, eot or ttf (see here how it do Font-Awesome and here full possibilities of CSS3). There are exist different free tools additionally which allows to convert one vector font to another format (see here as an example). WOFF is probably the most important format (see here which web browsers supports it).

I see only advantages in the usage of vector web fonts as icons instead of PNG icons. Probably there are some small performance disadvantages in usage of it in old web browsers, but I can't see any visible performance problems in my tests.

So TODOs from the issue which I posted can be divided it two parts:

  1. creating some icons which are part of jQuery UI standard Icon list and which are not yet in FortAwesome or on other free web sources
  2. usage of the icons directly in jQuery UI

Probably one can start with the step 2 and with the usage only existing icons which exists now, but I am not sure that look of the mix of icons made in different style will be good.

Thanks for your time,
Oleg
P.S. By the way there are other free web fonts which provide icons (see [here](http://www.entypo.com/, [here]%28http://fontello.com/%29, [here]%28http://icomoon.io/app/%29, [here]%28http://shoestrap.org/downloads/elusive-icons-webfont/%29 and so on)

@OlegKi
OlegKi commented May 10, 2013

Probably the Font Custom tool (see on github also) could help with the implementation. By the way I posted the question on the stackoverflow and the request on the jQuery UI forum, but till now without any progress which could forward to a solution.

@gtraxx
Member
gtraxx commented Jun 3, 2013

Font Awesome to add additional icons, I check if I have everything you need for integration instead of png icons.

I propose a test version before sending on github

:D

@addyosmani addyosmani closed this Dec 17, 2013
@OlegKi OlegKi referenced this issue in openpsa/jsgrid Jan 20, 2015
Open

Oleg's FontAwesome plugin #71

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment