文圆承的博客

font awesome 官方网站，　

rails插件： https://github.com/bokmann/font-awesome-rails

1. 在Gemfile中安装：

gem "font-awesome-rails",

在　application.css 中，增加：

*= require font-awesome

2. $ bundle install

3. 重启rails 应用

4. 在任意地方，使用下列代码，就可以看到图标了：

<%= link_to raw("<i class='fa fa-user-circle' aria-hidden='true'></i>欢迎您: #{current_user.try :user_name}"), root_path, :style=>"color:#ffffff;" %>

　或者使用纯HTML:

<i class="fa fa-user-circle" aria-hidden="true"></i>

对于一些极端情况的使用：

1. 在 submit中，添加图标：

参考； https://stackoverflow.com/a/25561768/445908 , 完整的cheatsheet列表: http://fontawesome.io/cheatsheet/

<%= f.submit raw("&#xf08b; 登陆"), class: "fa btn btn-primary" %>

2. 在输入文字框中，使用图标：参考：https://stackoverflow.com/a/27602359/

<span class="fa fa-user login_icon">
<input autofocus="autofocus" placeholder="用户名" style="margin-bottom: 30px" 
    name="user[user_name]" id="user_user_name" type="text">

<style>
.login_icon{
  top: 29px;
  position: relative;
  z-index: 2;
  margin-left: 11px;
  font-size: 21px;
  color: #dadada;
}
</style>

Music box