Rails使用圖標庫技巧

網頁中常常須要使用一些小圖標，這裏咱們想使用Font Awesome這個圖標庫裏的圖標，咱們能夠到rubygems.org查看是否有人將該圖標庫封裝成gem使得咱們使用更加敏捷

在rubugems搜索結果以下：

而後在結果頁面點擊"源代碼"：

來到源代碼的github頁面，咱們按照Readme來操做：

而後執行命令bundle 進行安裝（執行bundle install也同樣）

安裝完gem要重啓服務器

 

要引用該gem還得在application.css中添加引用以下：

（

若是不是application.css而是application.css.scss文件，那麼就不是*= require font-awesome，而是以下 

）

（

若是是application.css.sass文件，那麼就是以下

比起scss，區別是沒有雙引號和結尾的分號 

    @import font-awesome 

）

接下來咱們在視圖頁面中使用:

首先在官網查找所需圖標：

而後點擊進入便可查看使用的代碼：

把這部分代碼複製到視圖中便可(由於咱們安裝了gem因此本地圖標庫就包含官網的這些圖標，咱們直接加這個代碼就能夠使用該圖標了)

如上圖標顯示效果不理想，咱們能夠給它添加本身的樣式icon-muted以下：

 

附帶github的這個gem的Readme文檔，對比閱讀：

 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 was previously running.

Congrats! You now have 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 are also some helpers (fa_icon and fa_stacked_icon) that make 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 building a Rails engine that includes font-awesome-rails as a dependency, be sure to require "font-awesome-rails"somewhere during the intialization of your engine. Otherwise, Rails will not automatically pick up the load path of the font-awesome-rails assets and helpers (source 1, source 2, source 3).

Deploying to sub-folders

It is sometimes the case that deploying a Rails application to a production environment requires the application to be hosted at a sub-folder on the server. This may be the case, for example, if Apache HTTPD or Nginx is being used as a front-end proxy server, with Rails handling only requests that come in to a sub-folder such as http://example.com/myrailsapp. In this case, the FontAwesome gem (and other asset-serving engines) needs to know the sub-folder, otherwise you can experience a problem roughly described as "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 is taken from ENV['RAILS_RELATIVE_URL_ROOT'], so configuring the environment to defineRAILS_RELATIVE_URL_ROOT is an alternative strategy.

Rails 3.2

Note: In Rails 3.2, make sure font-awesome-rails is outside the bundler asset group so that these helpers are automatically loaded 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 will do our best not to make 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 are licensed under the MIT License.
• The remainder of the font-awesome-rails project is licensed under the MIT License.