FontAwesome загружается, но не отображается в Chrome, Safari или Firefox (отображает небольшие ящики)

На Rails 3.2.1 и Ruby 1.9.2 у меня есть font-awesome.css, font-awesome.min.css и font-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 аконца, это мой 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. Настолько разочаровывающе ... –

Я использую ту же версию рельсов с Ruby 1.9.3 + bootstrap и font-awesome и прекрасно работаю. Если это может помочь в этом, что я сделал

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

В активов/JavaScripts/приложения .js добавить эту строку

//= require bootstrap

Тогда у меня есть таблица стилей, в которой я импортирую bootstrap и переопределяю то, что хочу, так называемый «bootstrap-and-overrides.css. СКС В верхней части этого файла (очень первая линия) я поставил

@import "bootstrap";

И это все ... Font-устрашающий отображает мелкие (текст, а также иконки) ...

Надежда это могут помочь Вам

Cheers

источник

2013-03-15 09:27:17 phron

FontAwesome загружается, но не отображается в Chrome, Safari или Firefox (отображает небольшие ящики)

ответ

Смежные вопросы