Rails using Icon Library tips

Some small icons often need to be used in Web pages, where we want to use the icon in the icon Library of the font awesome, and we can go to rubygems.org to see if anyone has packaged the icon library into a gem, which allows us to use more agile

Search results in Rubugems are as follows:

Then click "Source Code" on the results page:

Come to the GitHub page of the source code, we follow the Readme to operate:

Then execute the command bundle to install it (the same is done with the bundle install)

To restart the server after installing the gem

?

To reference the Gem, add a reference to the APPLICATION.CSS as follows:

（

如果不是application.css而是application.css.scss文件，那么就不是*= require font-awesome，而是如下

）

（

如果是application.css.sass文件，那么就是如下

比起scss，区别是没有双引号和结尾的分号

[email protected]font-awesome

）

Next we use the View page:

First find the desired icon on your website:

Then click Enter to see the code you're using:

Copy this part of the code into the view (because we installed the gem so the local icon library contains the official website of these icons, we directly add this code can use the icon)

If the result is not ideal, we can add our own style to it icon-muted as follows:

?

This gem's readme document, which comes with GitHub, is compared to read:

? Readme.md

Font-awesome-rails

??

Font-awesome-rails provides the? font-awesome? Web fonts and stylesheets as a Rails engine for use with the asset pipeline.

Installation

Add this to your gemfile:

Gem "Font-awesome-rails"

And run? Bundle Install .

Usage

In your? Application.css , include the CSS file:

/*

*= require Font-awesome

*/

Then restart your webserver if it is previously running.

congrats! You are now having scalable vector icon support. Pick an icon and check out the? fontawesome Examples.

Sass Support

If you prefer? SCSS, add this to your? Application.css.scss ? File:

@import "font-awesome";

If you use the? Sass indented Syntax, add this to your? Application.css.sass ? File:

@import Font-awesome

Helpers

There is also some helpers (fa_icon? and? ) Fa_stacked_icon ) that do your views? icontastic!

Fa_icon "Camera-retro"

# = = <i class= "fa Fa-camera-retro" ></i>

?

Fa_icon "Camera-retro", text:"Take a photo"

# = = <i class= "fa Fa-camera-retro" ></i> take a photo

?

Fa_icon "Chevron-right", text:"Get started", right :true

# = = Get started <i class= "fa fa-chevron-right" ></i>

?

Fa_icon "Quote-left 4x", class:"text-muted pull-left"

# = = <i class= "fa fa-quote-left fa-4x text-muted pull-left" ></i>

?

Content_tag (: Li, fa_icon ("Check li", text:"bulleted list item")

# = = <li><i class= "fa fa-check fa-li" ></i> bulleted list item</li>

Fa_stacked_icon "Twitter", Base:"Square-o"

# = = <span class= "Fa-stack" >

# = = <i class= "fa fa-square-o fa-stack-2x" ></i>

# = = <i class= "fa fa-twitter fa-stack-1x" ></i>

# = </span>

?

Fa_stacked_icon "Dollar Inverse", Base:"Circle", class:"fa-5x"

# = = <span class= "Fa-stack fa-5x" >

# = = <i class= "fa fa-circle fa-stack-2x" ></i>

# = = <i class= "fa fa-dollar fa-inverse fa-stack-1x" ></i>

# = </span>

?

Fa_stacked_icon "terminal inverse", Base:"Square", class:"Pull-right" , text:"hi!"

# = = <span class= "Fa-stack pull-right" >

# = = <i class= "fa fa-square fa-stack-2x" ></i>

# = = <i class= "fa fa-terminal fa-inverse fa-stack-1x" ></i>

# = </span> hi!

Misc

Rails engines

When is building a Rails engine that includes font-awesome-rails as a dependency, being sure to? require "font-awesome-rails" somewhere during the intialization of your engine. Otherwise, Rails won't automatically pick up the load path of the Font-awesome-rails assets and helpers (source 1 , huh? Source 2,? Source 3).

Deploying to Sub-folders

it is sometimes the case, deploying a Rails application to a Productio n environment requires the application to is hosted at a sub-folder on the server. This may being the case, for example, if Apache HTTPD or Nginx are being used as a front-end proxy server with Rails handling Only requests, come in to a sub-folder such as? http://example.com/myrailsapp "My app works fine in development, but fails when I deploy it" .

To fix this, set the? relative URL root? for the application. In the environment file for the deployed version of the app, for exampleconfig/environments/production.rb , set the config option? Action_controller.relative_url_root :

Myapp::application.configure do

...

?

# Set the relative root, because we ' re deploying To/myrailsapp

Config.action_controller.relative_url_root = "/myrailsapp"

?

...

End

The default value of this variable are taken from? env[' rails_relative_url_root '] , so configuring the environment to define Rails_relative_url_root ? is an alternative strategy.

Rails 3.2

Note:? In Rails 3.2, make sure Font-awesome-rails was outside the Bundler asset group so it these helpers is automatically load Ed in production environments.

Versioning

Versioning follows the core releases of Font-awesome which follows Semantic Versioning 2.0 as defined at? http://semver.org. We'll do We don't have any breaking changes until Font-awesome core makes a major version bump.

License

• The? font Awesome? font is licensed under the? SIL Open Font License.
• Font Awesome ? CSS files is licensed under the? MIT License.
• The remainder of the Font-awesome-rails project is licensed under the? MIT License.

?

?

Rails using Icon Library tips