Rails使用图标库技巧

今天药忘吃喽~ 2021-12-24 02:33 218阅读 0赞

网页中经常需要使用一些小图标，这里我们想使用Font Awesome这个图标库里的图标，我们可以到rubygems.org查看是否有人将该图标库封装成gem使得我们使用更加敏捷

![887044-20160528154309694-1763391748.png][]

在rubugems搜索结果如下：

![887044-20160528154314663-338554359.png][]

然后在结果页面点击"源代码"：

![887044-20160528154317991-649239333.png][]

来到源代码的github页面，我们按照Readme来操作：

![887044-20160528154318834-37172759.png][]

然后执行命令bundle 进行安装（执行bundle install也一样）

![887044-20160528154319834-745709186.png][]

安装完gem要重启服务器

要引用该gem还得在application.css中添加引用如下：

![887044-20160528154321069-1086244948.png][]

（

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

![887044-20160528154321600-144878207.png][]

）

（

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

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

@import
    						font-awesome

）

接下来我们在视图页面中使用:

首先在官网查找所需图标：

![887044-20160528154323975-1673604914.png][]

然后点击进入即可查看使用的代码：

![887044-20160528154328834-1400517501.png][]

把这部分代码复制到视图中即可(因为我们安装了gem所以本地图标库就包含官网的这些图标，我们直接加这个代码就可以使用该图标了)

![887044-20160528154332350-1950056154.png][]

![887044-20160528154338756-193530069.png][]

如上图标显示效果不理想，我们可以给它添加自己的样式icon-muted如下：

![887044-20160528154339663-51830469.png][]

![887044-20160528154340053-1927538484.png][]

![887044-20160528154346538-362365216.png][]

# 附带github的这个gem的Readme文档，对比阅读： #

**README.md**

**font-awesome-rails**

![887044-20160528154348366-398568936.png][]![887044-20160528154348756-1384360934.png][]![887044-20160528154349178-491036489.png][]![887044-20160528154349584-758095461.png][] ![887044-20160528154350069-1107672812.png][]![887044-20160528154350459-1955362208.png][]

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"

\# =>

fa\_icon "camera-retro", text: "Take a photo"

\# => Take a photo

fa\_icon "chevron-right", text: "Get started", right: true

\# => Get started

fa\_icon "quote-left 4x", class: "text-muted pull-left"

\# =>

content\_tag(:li, fa\_icon("check li", text: "Bulleted list item"))

\# => <li> Bulleted list item</li>

fa\_stacked\_icon "twitter", base: "square-o"

\# =>

\# =>

\# =>

\# =>

fa\_stacked\_icon "dollar inverse", base: "circle", class: "fa-5x"

\# =>

\# =>

\# =>

\# =>

fa\_stacked\_icon "terminal inverse", base: "square", class: "pull-right", text: "Hi!"

\# =>

\# =>

\# =>

\# => 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"][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][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][].

转载于:https://www.cnblogs.com/blueColdFire/p/5537500.html

[887044-20160528154309694-1763391748.png]: /images/20211223/2c4d4226f9534ed4b8a576c942e868f9.png
[887044-20160528154314663-338554359.png]: /images/20211223/0aea0b68bd0d4c6ebd9f06501d136ac8.png
[887044-20160528154317991-649239333.png]: /images/20211223/d82d576f312046508844a165e8b39f26.png
[887044-20160528154318834-37172759.png]: /images/20211223/89efc2492d8346a3b58d714201b5aaee.png
[887044-20160528154319834-745709186.png]: /images/20211223/192ae3df8267432eb705f9a9ab117e80.png
[887044-20160528154321069-1086244948.png]: /images/20211223/cb2c9a8977e745619ada25f09f742350.png
[887044-20160528154321600-144878207.png]: /images/20211223/c6446200c9df42899c96fb86073ab127.png
[887044-20160528154323975-1673604914.png]: /images/20211223/c6692149d0ae43a3a759aff0446bf9e4.png
[887044-20160528154328834-1400517501.png]: /images/20211223/814f18107fda471892252927b68c5bcd.png
[887044-20160528154332350-1950056154.png]: /images/20211223/5e5f0e84c3514c7989d2dce3c61e0749.png
[887044-20160528154338756-193530069.png]: /images/20211223/eab6baefc86040baad6bf7dd8d727b30.png
[887044-20160528154339663-51830469.png]: /images/20211223/883699d23cef4ec1b6696b2d0f2440cf.png
[887044-20160528154340053-1927538484.png]: /images/20211223/9e2804e099fc43fa8f56a24a44e66153.png
[887044-20160528154346538-362365216.png]: /images/20211223/4fe77396265745fc9c00db6e735c2677.png
[887044-20160528154348366-398568936.png]: https://images2015.cnblogs.com/blog/887044/201605/887044-20160528154348366-398568936.png
[887044-20160528154348756-1384360934.png]: https://images2015.cnblogs.com/blog/887044/201605/887044-20160528154348756-1384360934.png
[887044-20160528154349178-491036489.png]: https://images2015.cnblogs.com/blog/887044/201605/887044-20160528154349178-491036489.png
[887044-20160528154349584-758095461.png]: https://images2015.cnblogs.com/blog/887044/201605/887044-20160528154349584-758095461.png
[887044-20160528154350069-1107672812.png]: https://images2015.cnblogs.com/blog/887044/201605/887044-20160528154350069-1107672812.png
[887044-20160528154350459-1955362208.png]: /images/20211223/fa2740ee63a94ab688b025698641e688.png
[Font-Awesome]: http://fortawesome.github.com/Font-Awesome/
[FontAwesome Examples]: http://fortawesome.github.io/Font-Awesome/examples/
[SCSS]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html
[Sass indented syntax]: http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html
[source 1]: https://github.com/bokmann/font-awesome-rails/issues/130
[source 2]: https://bibwild.wordpress.com/2013/02/27/gem-depends-on-rails-engine-gem-gotcha-need-explicit-require/
[source 3]: http://stackoverflow.com/questions/5159607/rails-engine-gems-dependencies-how-to-load-them-into-the-application/5850503
[my app works fine in development_ but fails when I deploy it]: https://github.com/bokmann/font-awesome-rails/issues/74
[http_semver.org]: http://semver.org/
[Font Awesome]: http://fortawesome.github.com/Font-Awesome
[SIL Open Font License]: http://scripts.sil.org/OFL
[MIT License]: http://opensource.org/licenses/mit-license.html