rails - 使用font awesome 来实现图标

参考： font awesome  官方网站，　

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


Search | Font Awesome中國可以使用的

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>

<%= submit_tag raw("&#xf002; 查询"), class: "form_submit", class: 'btn btn-secondary btn-sm fa-input' %>
 11   <%= link_to raw('<li class="fa fa-download"></li>下载csv'), download_csv_redeem_codes_path, class: "btn btn-primary btn-sm"%>

 增加路徑的使用，注意使用的版本，以便於使用可以在頁面顯示的语言

<link rel="stylesheet" href="https://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css">

5. 建议：对于下面常见操作的icon:  

新增：　fa-plus 

编辑：　fa-edit  

查看：　fa-info

删除：    fa-remove

确定 :      fa-check  　（用在submit 中的话，就是   &#xf00c;      <input type='submit' value='&#xf00c;提交' ... 

返回 :      fa-close   

可以使用编辑器的　全局替换．　例如：Vim 的Gsearch/Greplace来实现．非常过瘾．

6. 记得要在页面的全局js中，增加这个代码，为所有的fa类，都设置　合适的宽度．(参考：font awesome - How do I make sure every glyph has the same width? - Stack Overflow )

// 让每个font-awesome图标都有固定的宽度．看起来更加美观
$('.fa').addClass('fa-fw')

对于一些特殊情况的使用：

1.  在 submit中，添加图标：

参考；  twitter bootstrap - Font-awesome, input type 'submit' - Stack Overflow  ,  完整的cheatsheet列表:  http://fontawesome.io/cheatsheet/

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

也可以通过纯jQuery来实现：（貌似方便一些？）

   // 让每个　

  都增加class:  fa-input, 这样就可以增加图标了．
   // 记得在　\uf00c 和　确定之间来个空格．看起来舒服些．
   $('input[value="确定"]').addClass('fa-input').val("\uf00c 确定")

然后，记得为　　.fa-input  增加样式：

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}