Rails 如何使用 fontawesome

VincentJiang · 2013年11月15日 · 最后由 apple 回复于 2015年01月08日 · 8327 次阅读

昨天想尝试使用 fontawesome,网址为http://fontawesome.io/SASS,我想使用 Ruby Gem 的方法,如下官方截图: 但配置了好久都不成功,请问官网的教程是否有误呢?哎~~~

但配置了好久都不成功

怎么不成功法

#1 楼 @Rei gem 包都安装好了,在页面上写,但浏览网页的时候,还是没有 icon 出现,请问是什么原因?

If you use Rails/Sprockets, add this to e.g. application.css.scss:

*= require font-awesome

这个做了没。

我这里没有看见 application.css.scss,但有 application.css,但我已经加进去了,还是没有 icon 出现,是不是还有什么需要在页面上引用?

开浏览器调试,看看有读取 font-awesome 相关的 css 没,再看看内容,正不正常。

@Rei 热心人啊,而且还这么年轻,中国有希望了。。

#5 楼 @Rei 已经在 application.css 中加入*= require font-awesome 页面的源码没有出现 font-awesome 相关的 css

语法错了,把那行放在 *= require_tree 的前面,成为注释的一部分。

#8 楼 @Rei 请问是不是这样配置?

#10 楼 @Rei 但是浏览页面的时候显示了如下的错误,囧。。。

顶楼说的 gem 是 sass,这里怎么装了 less。

#12 楼 @Rei 不好意思,一开始截图错了,我已经修改了,但我一直是在尝试 less 的

用 less 要麻烦一些了,它要 load js runtime,require js 的库 less。把 Gemfile.lock 列出来,看现在用了什么 js runtime。

我试过了没问题,你 bundle 了以后服务器重启一下

#14 楼 @Rei 我的 Gemfile.lock 如下:

GEM
  remote: http://ruby.taobao.org/
  specs:
    actionmailer (4.0.1)
      actionpack (= 4.0.1)
      mail (~> 2.5.4)
    actionpack (4.0.1)
      activesupport (= 4.0.1)
      builder (~> 3.1.0)
      erubis (~> 2.7.0)
      rack (~> 1.5.2)
      rack-test (~> 0.6.2)
    activemodel (4.0.1)
      activesupport (= 4.0.1)
      builder (~> 3.1.0)
    activerecord (4.0.1)
      activemodel (= 4.0.1)
      activerecord-deprecated_finders (~> 1.0.2)
      activesupport (= 4.0.1)
      arel (~> 4.0.0)
    activerecord-deprecated_finders (1.0.3)
    activesupport (4.0.1)
      i18n (~> 0.6, >= 0.6.4)
      minitest (~> 4.2)
      multi_json (~> 1.3)
      thread_safe (~> 0.1)
      tzinfo (~> 0.3.37)
    arel (4.0.1)
    atomic (1.1.14)
    builder (3.1.4)
    coffee-rails (4.0.1)
      coffee-script (>= 2.2.0)
      railties (>= 4.0.0, < 5.0)
    coffee-script (2.2.0)
      coffee-script-source
      execjs
    coffee-script-source (1.6.3)
    commonjs (0.2.7)
    erubis (2.7.0)
    execjs (2.0.2)
    font-awesome-less (4.0.2)
      less-rails (>= 2.4.2)
    hike (1.2.3)
    i18n (0.6.5)
    jbuilder (1.5.2)
      activesupport (>= 3.0.0)
      multi_json (>= 1.2.0)
    jquery-rails (3.0.4)
      railties (>= 3.0, < 5.0)
      thor (>= 0.14, < 2.0)
    json (1.8.1)
    less (2.4.0)
      commonjs (~> 0.2.7)
    less-rails (2.4.2)
      actionpack (>= 3.1)
      less (~> 2.4.0)
    mail (2.5.4)
      mime-types (~> 1.16)
      treetop (~> 1.4.8)
    mime-types (1.25)
    minitest (4.7.5)
    multi_json (1.8.2)
    polyglot (0.3.3)
    rack (1.5.2)
    rack-test (0.6.2)
      rack (>= 1.0)
    rails (4.0.1)
      actionmailer (= 4.0.1)
      actionpack (= 4.0.1)
      activerecord (= 4.0.1)
      activesupport (= 4.0.1)
      bundler (>= 1.3.0, < 2.0)
      railties (= 4.0.1)
      sprockets-rails (~> 2.0.0)
    railties (4.0.1)
      actionpack (= 4.0.1)
      activesupport (= 4.0.1)
      rake (>= 0.8.7)
      thor (>= 0.18.1, < 2.0)
    rake (10.1.0)
    rdoc (3.12.2)
      json (~> 1.4)
    sass (3.2.12)
    sass-rails (4.0.1)
      railties (>= 4.0.0, < 5.0)
      sass (>= 3.1.10)
      sprockets-rails (~> 2.0.0)
    sdoc (0.3.20)
      json (>= 1.1.3)
      rdoc (~> 3.10)
    sprockets (2.10.0)
      hike (~> 1.2)
      multi_json (~> 1.0)
      rack (~> 1.0)
      tilt (~> 1.1, != 1.3.0)
    sprockets-rails (2.0.1)
      actionpack (>= 3.0)
      activesupport (>= 3.0)
      sprockets (~> 2.8)
    sqlite3 (1.3.8)
    thor (0.18.1)
    thread_safe (0.1.3)
      atomic
    tilt (1.4.1)
    treetop (1.4.15)
      polyglot
      polyglot (>= 0.3.1)
    turbolinks (1.3.0)
      coffee-rails
    tzinfo (0.3.38)
    uglifier (2.3.1)
      execjs (>= 0.3.0)
      json (>= 1.8.0)

PLATFORMS
  ruby

DEPENDENCIES
  coffee-rails (~> 4.0.0)
  font-awesome-less
  jbuilder (~> 1.2)
  jquery-rails
  rails (= 4.0.1)
  sass-rails (~> 4.0.0)
  sdoc
  sqlite3
  turbolinks
  uglifier (>= 1.3.0)

#15 楼 @tyaccp_guojian 重启过了,还是不行。。。

#16 楼 @jxs471494539 怎么没有 fontawesome

#18 楼 @Rei 刚才贴错了另一个项目的 Gemfile.lock 了,现在已经改过来,有 font-awesome-less (4.0.2)

#19 楼 @chunlea 感觉这个不错哦,我试试

gem 'therubyracer'

https://github.com/cowboyd/commonjs.rb 目前只支持这两个

#19 楼 @chunlea 我刚刚已经试了,成功了,谢谢!

#22 楼 @Rei 我已经加入了 gem 'therubyracer',之后没有报错了,可是页面还是没有出现 icon,囧。。。 不过算了,我用了@chunlea 方法,感觉挺简单的。

谢谢@Rei@chunlea 两位的帮助!

你好 我本地简单的文件测试可以正常,但我使用到 zencart 上效果一直不出来,css 和 fonts 是同级

需要 登录 后方可回复, 如果你还没有账号请 注册新账号