Font-Awesome-Pro

thanthos/Font-Awesome-Pro

Fork 0

Files

History

Brian Talbot 0294c13dd0 polishing SVG Framework demos/docs

2017-05-31 18:50:17 -04:00

alpha

polishing SVG Framework demos/docs

2017-05-31 18:50:17 -04:00

README.md

Initial alpha release of SVG Framework (#418 )

2017-05-31 17:13:18 -05:00

README.md

Our $1,000,000 Kickstarter stretch goal brought our SVG Framework to all of Font Awesome 5. We are super-excited to bring this to you.

As a Pro backer your early access preview gives you access to this new framework and we need your help!

We're collecting feedback here.

Different styles

With Font Awesome 5 Pro we are introducing three styles of icons - Solid, Regular, and Light. Each icon will look similar across styles, but will generally have different line thickness or outlines instead of solid fills. Also, some icons may have more customized treatments across styles as well.

Style	prefix
solid	fa*
regular	far
light	fal

* Use can use fas as well. This is an alias for fa

How do I try the SVG Framework out?

You have two options:

Option 1: JavaScript

Grab one or more of the styles (ex: alpha/solid.js) in the alpha directory
Grab the loader alpha/loader.js
Place these files in your project static files
Include them in the <head> of your document

Example:

<head>
  <script defer src="./solid.js"></script>
  <script defer src="./loader.js"></script>
</head>
<body>
  <i class="fa fa-user"></i>
</body>

Or if you want to use the light style:

<head>
  <script defer src="./light.js"></script>
  <script defer src="./loader.js"></script>
</head>
<body>
  <i class="fal fal-user"></i>
</body>

Or multiple styles:

<head>
  <script defer src="./light.js"></script>
  <script defer src="./regular.js"></script>
  <script defer src="./loader.js"></script>
</head>
<body>
  <i class="fal fal-user"></i>
  <i class="far far-magic"></i>
</body>

Optional prefix:

<head>
  <script defer src="./solid.js"></script>
  <script defer src="./loader.js"></script>
</head>
<body>
  <i class="fas-user"></i> You don't have to have the prefix
</body>

You can also check out the alpha/demo-js.html file included to see an example of how to set this up as well as a reference for what icons you can currently use.

Pros:

Most familiar (still use <i class="fa fa-user"></i>)
Replaces icons with inline <svg> elements for you
Includes and packages the CSS features of Font Awesome (like .fa-spin)
Easy, automatic accessibility handling
Support for unicode and ligatures (not complete yet)

Cons:

You need JavaScript
Not as performant as sprites
DOM mutations take special handling
Has a few moving parts

Browser support (tested using BrowserStack):

On	Edge	IE	Chrome	Firefox	Safari	Opera	Yandex
Desktop versions	last 2	last 2 (10, 11)	last 2	last 2	last 2	last 2	14
Mobile versions	-	-	iOS latest Android 6, 5, 4	iOS latest Android 6, 5, 4	iOS 9, 10	-	-

Option 2: SVG Sprite

Grab one of the sprite files (alpha/solid.svg) in the alpha directory
Place this file in your project static files
In your HTML put something like this:

<body>
  <svg>
    <use xlink:href="solid.svg#alarm-clock"></use>
  </svg>
</body>

You can also check out the alpha/demo-sprite.html file included to see an example of how to set this up as well as a reference for what icons you can currently use.

The way SVG Sprites work in this example is by auto-loading the URL for solid.svg and then using the <symbol> with the id of alarm-clock.

Cross-origin caveat This requires that you are serving the sprite from the same domain and port as the page.

Serving locally For this sprite to load you need to be serving it from http or https. If you try to open alpha/demo-sprite.html from the file system (if your address begins with file://) it will fail to load.

Pros:

No JavaScript
Super simple
Fast!

Cons:

Cross-origin loading (like a CDN) is pretty tough
Doesn't include the CSS framework
Not backward compatible (cannot use <i>)
Takes extra effort to make it accessible

Browser support (tested using BrowserStack):

On	Edge	IE	Chrome	Firefox	Safari	Opera	Yandex
Desktop versions	last 2	no*	last 2	last 2	last 2	last 2	14
Mobile versions	-	-	iOS latest Android 6, 5, 4	iOS latest Android 6, 5, 4	iOS 9, 10	-	-

* IE will not automatically download SVG documents referenced with xlink:href

See it in action using a HTTP server on localhost

The quickest way to see these things in action is to launch a cheap (as in time) web server:

Open a shell/terminal window and cd svg-framework/alpha
Run python -m SimpleHTTPServer 8080
Open http://localhost:8080/demo-js.html or http://localhost:8080/demo-sprite.html in your browser