font_awesome5_rails

by tomkra

font_awesome_5_rails is font awesome 5 gem bundled for rails asset pipeline

136 Stars 23 Forks Last release: 17 days ago (1.3.0) MIT License 115 Commits 10 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Font Awesome 5 Rails

Gem Version FA5 version Build Status HitCount

fontawesome5rails provides the Font-Awesome5 web fonts, stylesheets and javascripts as a Rails engine for use with the asset pipeline and with backwards compatibility with font-awesome-rails gem.

This gem provides only Free icons from Font-Awesome.

Keep track of changes in Changelog.

Table of Contents

Installation
- Install as webfont with CSS
- Install as SVG with JS
- Install with webpack

Usage
- Basic usage
- Solid, Regular, Light, Brand icon types
- Animations and data attributes
- Layered and Stacked icons

Use as images
FontAwesome 5 Pro icons
Release notes
Buy me a coffee

Installation

Now you have two options how to include FontAwesome 5 icons. First option is to use

SVG
and
JS
files which is recommended by FontAwesome team. However you can use icons as
webfont with CSS
but you will not be able to use new FA5 features as animations or
layered_icons
. Choose one installation option from above:

Check out the differences in here.

Add this line to your application's Gemfile:

gem 'font_awesome5_rails'

1. Install as webfont with CSS

In your

application.css
, include the css file:
css
 *= require font_awesome5_webfont
or if you prefer scss add this to your
application.css.scss
file:
scss
@import 'font_awesome5_webfont';

2. Install as SVG with JS

In your

application.css
, include the css file:
css
 *= require font_awesome5
or if you prefer scss add this to your
application.scss
file:
scss
@import 'font_awesome5.css'; //application.scss

If you're using

.sass
and having problem with loading, try to omit
.css
extenstion and import font as follows:
scss
@import 'font_awesome5';
Check issue#57 for details.

In your

application.js
, include the javascript file: ```javascript

= require font_awesome5

### 3. Install with webpack
If you want to install Font Awesome with ```yarn``` or ```npm``` and still use helpers from this gem It's possible.

First add Font Awesome to your package.json.

```shell $ yarn add @fortawesome/fontawesome-free

Next import font in your

app/javascript/packs/application.js
. You can find more about import in FA pages.

Now you have icons installed through webpack and still you can use

fa_icon
helpers.

Usage

Gem provides FontAwesome icons through helper. In your views just call

fa_icon
.

Basic usage

fa_icon('camera-retro')
# => 

fa_icon('camera-retro', style: 'color: Tomato')

=>

fa_icon('camera-retro', class: 'my-class', text: 'Camera', size: '3x')

=>

=> Camera

fa_icon(:camera_retro, class: 'my-class')

=>

fa_icon(:camera_retro, text: 'Camera', right: true)

=> Camera

=>

Solid, Regular, Light, Brand, Duotone icon types

In Font Awesome 5 there are several different types of icons. In fontawesome5rails gem default icon type is

solid
. If you want to use different icon style you can do this through
type
attribute.

| Style | type: | type: | | ------------- |-------|--------| | Solid | :fas |:solid | | Regular | :far |:regular| | Light | :fal |:light | | Brand | :fab |:brand | | Duotone | :fad |:duotone|

fa_icon('camera-retro', type: :solid) #Default
# => 

fa_icon('camera-retro', type: :regular)

=>

fa_icon('camera-retro', type: :light)

=>

fa_icon('camera-retro', type: :brand)

=>

fa_icon('camera-retro', type: :duotone)

=>

fa_icon('camera-retro', type: :fab)

=>

Each icon type has its own helper method so you don't need to provide the

type
attribute in every call. Which can be overridden, if it is provided. ```ruby far_icon('camera-retro')

=>

far_icon('camera-retro', type: :fab)

=>

farstackedicon('camera', base: 'circle')

=>

=>

=>

=>

farstackedicon('camera', base: 'circle', type: :fal)

=>

=>

=>

=>

### Animations and data attributes
FontAwesome 5 provides new animations and data attributes. Here are some examples how to use them:
```ruby
fa_icon('camera-retro', animation: 'spin')
# => 

fa_icon('camera-retro', data: {'fa-transform': 'rotate-90'})

=>

In FontAwesome5 the text is right behind icon. For better readability text has defaultly set to

padding-left: 5px;
. If you want to override this setting, you can do that through
.fa5-text
class in css styles.

Layered and Stacked icons

FontAwesome 5 newly provides layered icons. For backward compatibility there were preserved

fa_stacked_icon
helper, but you can acomplish the same result with
fa_layered_icon
.

Layered icon examples

fa_layered_icon
takes options and block of code that will be rendered inside.

Following

fa_layered_icon
examples are written in
haml
. ```ruby = falayeredicon do = fa_icon 'circle'

=>

=>

=>

= falayeredicon style: 'background: MistyRose', size: '4x' do = faicon 'circle', style: 'color: Tomato' = faicon 'times', class: 'fa-inverse', data: { fa_transform: 'shrink-6' }

=>

=>

=>

=>

=>

=>

= falayeredicon aligned: :false do = fa_icon 'circle' %span.fa-layers-text= "Text" %span.fa-layers-counter= "1,419"

=>

=>

=> 1,419

=>

#### Stacked icon examples
For different base icon type you can use ```base_type``` option.
```ruby
fa_stacked_icon('camera', base: 'circle')
# => 
# =>   
# =>   
# => 

fa_stacked_icon('camera inverse', base: 'circle', type: :fas, class: 'my-class') #Default :fas is default type

=>

=>

=>

=>

fa_stacked_icon('camera', base: 'circle', reverse: true, text: 'Text!') #Default: reverse: false

=>

=>

=>

=> Text!

fa_stacked_icon('camera', base: 'circle', type: :fas, base_type: :fab)

=>

=>

=>

=>

fa_stacked_icon('camera', base: 'circle', type: :fas, base_type: :fab, base_options: { class: 'base' }, icon_options: { style: 'color: red' })

=>

=>

=>

=>

Use as images

From version

0.2.3
you can include icons as images in your views.
ruby
image_tag('fa5/solid/camera.svg')
image_tag('fa5/brand/facebook.svg')
image_tag('fa5/regular/bell.svg', width: '100px', class: 'my-img')

More examples can be found in specs.

More animation and data attributes can be found on FontAwesome documentation.

FontAwesome 5 Pro icons

Due to licence policy this gem pack only free FA5 icons. However

fa_icon
helper support all types of icons. If you purchased FA5 Pro icons and want to use helpers provided by this gem it's possible. 1. Add this gem to your
Gemfile
without including anything to
application.css
and
application.js
. 2. Create a Kit on Font Awesome. 3. Add
= javascript_include_tag "//kit.fontawesome.com/[YOUR-KIT-ID].js"
in the head of your layout(s). 4. You should now be able to use all FA5 Pro icons with helpers provided by this gem.

If you have any questions feel free to create a new issue.

Release notes

If you're upgrading from

0.3.x
version to
0.4.x
, you might need to change assets version in
assets.rb
, due to filename changes.

License

The gem is available as open source under the terms of the MIT License.

Font Awesome5 License.

Buy me a coffee

If you liked this gem, you can Buy Me A Coffee .

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.