[英]Rails - using font-awesome icons
I have a rails 4 app and am trying to use the font awesome icons in it (for social media login links). 我有一个rails 4应用程序,我正在尝试使用其中的字体真棒图标(用于社交媒体登录链接)。
I have: 我有:
/* application.css.css:
*= require_framework_and_overrides.css.scss
*= require_self
*= require_tree .
*/
/* framework_and_overrides.css.css: */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
In my gemfile: 在我的gemfile中:
gem 'font-awesome-sass', '~> 4.4.0'
I am also using bootstrap sass. 我也在使用bootstrap sass。
In my view, I try: 在我看来,我尝试:
<%= link_to content_tag(icon('facebook', class: 'facebookauth')) %>
It renders "<>>" with nothing in between. 它呈现“<>>”,两者之间没有任何内容。
I have also tried: 我也尝试过:
<%= link_to content_tag icon('facebook', class: 'facebookauth') %>
I get the same error. 我犯了同样的错误。
When I try: 当我尝试:
<%= link_to content_tag(fa_icon('facebook', class: 'facebookauth')) %>
<%= link_to content_tag fa_icon('facebook', class: 'facebookauth') %>
I get this error: 我收到此错误:
undefined method `fa_icon' for
Does anyone know how to use font-awesome in Rails? 有谁知道如何在Rails中使用font-awesome?
A new attempt: 新尝试:
<%= link_to icon('google', id: 'googleauth'), user_omniauth_authorize_path(:google_oauth2) %>
<%= link_to icon('linkedin', id: 'linkedinauth'), user_omniauth_authorize_path(:linkedin) %>
<%= link_to icon('twitter', id: 'twitterauth'), user_omniauth_authorize_path(:twitter) %>
<% end %>
This works fine to make the links, but I'm trying to put styling on the icons. 这可以很好地建立链接,但我试图在图标上添加样式。
I have defined a css div called :facebookauth. 我已经定义了一个名为:facebookauth的css div。
When I change the above, to: 当我改变上述内容时,:
<%= link_to icon('facebook', id: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
Or try: 或尝试:
<%= link_to icon('facebook', class: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
The links disappear. 链接消失了。 I want to make the size bigger and use my color styles.
我想让尺寸更大并使用我的颜色样式。 How can I put CSS on these links?
如何在这些链接上放置CSS?
The helper seems to just populate the content of the content_tag
- you still need to provide an element. 帮助器似乎只填充
content_tag
的内容 - 您仍然需要提供一个元素。
From the docs : 来自文档 :
content_tag(:li, fa_icon('facebook', class: 'facebookauth'))
If you wanted to use the icon on its own, you'd be able to call fa_icon
individually: 如果您想单独使用该图标,您可以单独调用
fa_icon
:
fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>
-- -
how to use the gem as it is intended
如何按原样使用宝石
All the "web font" gems basically do the following: 所有“网络字体”宝石基本上都做了以下事情:
:before
tag with content:
of the web font :before
标签, content:
web字体 Each time you call one of the elements of the font (with class
), you're really just prepending a :before
with the appropriate font reference. 每次调用字体的一个元素(带有
class
)时,您实际上只是:before
使用适当的字体引用:before
添加:before
。
Therefore, in order to do this, you need a valid HTML element. 因此,为此,您需要一个有效的HTML元素。 The
fa_icon
helper seems to create a <i>
tag -- <i class="fa fa-camera-retro"></i>
. fa_icon
帮助器似乎创建了一个<i>
标签 - <i class="fa fa-camera-retro"></i>
。 If you want to use it with content_tag
, you need to therefore provide another element for Rails to wrap the content in. 如果要将其与
content_tag
一起使用,则需要为Rails提供另一个元素来包装内容。
-- -
Update 更新
Make sure it works like this: 确保它的工作方式如下:
<%= link_to fa_icon("facebook", text: "Facebook", class: "facebookauth"), your_path %>
We recently used the gem in a project and here's the result: 我们最近在项目中使用了gem,结果如下:
Try this: 尝试这个:
Pure HTML: 纯HTML:
<a class="btn btn-lg btn-social btn-github" href="<%= content_tag_url %>">
<i class="fa fa-facebook"></i> Facebook
</a>
添加include FontAwesome::Rails::IconHelper
到app/helpers/application_helper.rb
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.