rails - 使用font awesome 来实现图标

June 06, 2018 16:54
访问量:358
摘要:对于一些管理系统,比如erp,cms,mes,crm等等,给每个菜单选项, button , input输入框中加入合适的icon , 会显得更加系统更加精致。这个就是rails使用起来特别方便的icon.

1.在Gemfile中安装:

 gem "font-awesome-rails",

2.在application.css 中,增加:

 *= require font-awesome

3.$ bundle install && 重启rails server

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

<%= link_to raw("欢迎您: #{current_user.try :user_name}"), root_path, :style=>"color:#ffffff;" %>

或者使用纯HTML:

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

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>

参考地址:

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站