rails - 使用font awesome 来实现图标

参考：　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>

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类，都设置　合适的宽度．(参考：https://stackoverflow.com/questions/16592849/how-do-i-make-sure-every-glyph-has-the-same-width )

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

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

1.  在 submit中，添加图标：

参考；  https://stackoverflow.com/a/25561768/445908  ,  完整的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;
}

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>

下面是效果：