Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minimize dependency on Font Awesome #223

Closed
dandv opened this issue Apr 27, 2015 · 5 comments
Closed

Minimize dependency on Font Awesome #223

dandv opened this issue Apr 27, 2015 · 5 comments
Labels
enhancement

Comments

@dandv
Copy link
Contributor

dandv commented Apr 27, 2015

I'm trying to decrease load time of Webix + dependencies.

Looks like Font Awesome would be a good candidate for optimization. What Font Awesome icons are used implicitly by Webix? If the user explicitly makes use of FA icons, then they should load Font Awesome; but otherwise, FA might be unnecessary.

So far, the only case in which Webix uses FA characters that I know of is to indicate table column sort direction:

image

Font Awesome is a pretty large dependency just for these two up/down characters. Would it be possible to replace that special up/down character with a Unicode character that comes with a standard font?
@mkozhukh
Copy link
Member

  • sorting
  • combo, richselect
  • icons in tree and treetable

There only about ten different icons, but some of them ( tree icons ) will be hard to replace.

How about creating a separate mini-font from the FontAwesome. It will be 10 times smaller and will load much faster. Also, the font file will be loaded only when some icon was rendered on the page. Font will not delay initial UI rendering.

The second font (PT-Sans) which is used for all text labels in the Flat skin will delay rendering of any text in the initial UI. It can be replaced with any standard font, but such replacement will result in less nice looking interface.

@dandv
Copy link
Contributor Author

dandv commented Apr 30, 2015

How about creating a separate mini-font from the FontAwesome. It will be 10 times smaller and will load much faster.

Great idea! http://fontastic.me/ might help?

The second font (PT-Sans) which is used for all text labels in the Flat skin will delay rendering of any text in the initial UI.

There's a way to optimize font loading explained at http://www.filamentgroup.com/lab/font-events.html:

By referencing our fonts using CSS @font-face and using font loading APIs to load and enable them when ready, we’ve found our fastest page load yet (complete in 600 milliseconds on wifi!) while retaining the progressive font rendering we desired.

@dandv dandv mentioned this issue Apr 30, 2015
Open
@dandv
Copy link
Contributor Author

dandv commented Aug 13, 2015

In the meantime I found a far better way to include just a few icons: inlining SVGs. It's compatible with IE9+ and super simple:

  1. Get the SVG icon code from https://github.com/encharm/Font-Awesome-SVG-PNG. For example, the arrow to indicate sorting up is "angle-up" and we can find it at https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/angle-up.svg

  2. Click "Raw" and get the code.

  3. Add the code to a SVG defs section like this:

    <head>
<svg id="svg-source" style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs><!-- use defs per http://www.w3.org/TR/SVG/struct.html#Head -->

  <symbol id="fa-angle-up" viewBox="0 0 1792 1792">
    <title>Angle up icon from Font Awesome</title>
    <path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"/>
  </symbol>

</defs>
</svg>
</head>

  4. Use the icon wherever desired: <svg><use xlink:href="#fa-angle-up"></use></svg>

Great article: SVG vs. icon fonts

@dana2208
Copy link

dana2208 commented Oct 8, 2015

Hi,

How can you use this technique instead of installing fortawesome:fontawesome for webix datatable sorting icon?
I don't understand how you can use the svg tag instead of the webix_ss_sort_asc style.

Thank you

@Zwillinge
Copy link
Member

Added in Webix. 6.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@dandv @mkozhukh @Zwillinge @HannaBabrouskaya @dana2208