FontAwesome裝載但在Chrome，Safari或Firefox不顯示（顯示小箱）

on Rails的3.2.1和Ruby 1.9.2，我有字體awesome.css，字體awesome.min.css和字體awesome- ie7.min.css放在app/assets/fonts目錄中。FontAwesome裝載但在Chrome，Safari或Firefox不顯示（顯示小箱）

這裏是我使用的@import聲明：

@font-face { 
    font-family: 'FontAwesome'; 
    src: url("./fonts/fontawesome-webfont.eot"); 
    src: url("./fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), 
    url("./fonts/fontawesome-webfont.woff") format('woff'), 
    url("./fonts/fontawesome-webfont.ttf") format('truetype'), 
    url("./fonts/fontawesome-webfont.svg#FontAwesome") format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

我說的是應用程序加載和編譯字體文件夾中配置資產管道/ application.rb中像這樣的一部分：

config.assets.paths << "#{Rails.root}/app/assets/fonts" 

config.assets.precompile += %w(.svg .eot .woff .ttf)

我也有我的application.css文件中的以下內容：

*= require_self 
*= require_tree . 
*= require ./../fonts/font-awesome

˚F inally，這是我的HTML：

<i class="icon-facebook"></i>

的問題是，當圖標應該顯示，有而不是顯示一個小的小盒子。我在我的應用程序的主要css文件中有：

i { 
    width: 1em; 
    height: 1em; 
    display:block; 
    cursor: pointer; 
}

...但它不顯示圖標。

字體awesome.css似乎是正確加載，因爲這會出現在源代碼中：

<link href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" type="text/css">

爲什麼這些小的小盒子顯示地方的圖標呢？顯然，我失去了一些東西......

任何幫助將非常感激。

UPDATE：

還是不知道爲什麼上面不工作，但我結束了創建一個鏈接關係到我的標籤外部託管字體真棒樣式表，如下所示：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">

我仍然寧願找到上述解決方案，儘管萬一鏈接的網站出現問題。

來源

2013-03-14 kwyoung11

你是否找到了解決這個問題的辦法？我有一個類似的問題，其中的CSS文件加載正常，但圖標不顯示，直到我在Chrome上啓動檢查器。它只發生在Chrome上。太令人沮喪了...... – 2014-03-13 14:32:00

我使用與Ruby 1.9.3 + bootstrap和font-awesome相同的rails版本，並使其工作得很好。如果能在這裏幫助我做了什麼

的Gemfile

gem 'bootstrap-sass', '2.2.2.0' 
gem 'bootstrap-will_paginate', '0.0.9' 
gem 'font-awesome-sass-rails', '3.0.0.1'

在資產/樣式application.css.scss加入這一行

*= require _font-awesome

在資產/ Java腳本/應用.JS加入這一行

//= require bootstrap

然後我有一個樣式表，我導入引導程序並覆蓋我想要的'bootstrap-and-overrides.css。SCSS 在這個文件的頂部（第一行），我把

@import "bootstrap";

而這一切......字體 - 真棒顯示細膩（文本和圖標）...

希望這可以幫到你

乾杯

來源

2013-03-15 09:27:17 phron

FontAwesome裝載但在Chrome，Safari或Firefox不顯示（顯示小箱）

回答

相關問題