Back

rails - 使用font awesome 来实现图标

发布时间: 2018-01-03 10:57:00

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

下面是效果:

Screenshot From 2018 01 10 16 25 19 列表页带图标

Screenshot From 2018 01 10 16 25 55 表单 带图标

Back