Бутстрап-глификон, не показывающий рельсы приложений - путь?

Question

Я пытаюсь получить Glyphicon, чтобы показать, используя Bootstrap в приложении Rails, но я не могу понять, как его показать. Я прочитал несколько вопросов здесь, пытаясь решить эту проблему, установив путь. Однако, пройдя эти вопросы/ответы, я все еще застрял b/c, глификон не появится.

Оба изображения и таблицы стилей находятся в одном каталоге «Активы». HTML, который я использую, кажется, работает нормально b/c, когда я проверяю элемент в Chrome, он находит соответствующий класс, который ссылается на таблицу стилей Bootstrap.

HTML:

<p><%= link_to raw('<i class="icon-share-alt"></i>'), post %></p> 

CSS (по умолчанию от Bootstrap КРОМЕ Я обновил/IMG к/изображения б/с, что это то, что мой каталог изображений называется):

[class^="icon-"], 
[class*=" icon-"] { 
display: inline-block; 
width: 14px; 
height: 14px; 
margin-top: 1px; 
*margin-right: .3em; 
line-height: 14px; 
vertical-align: text-top; 
background-image: url("../images/glyphicons-halflings.png"); 
background-position: 14px 14px; 
background-repeat: no-repeat; 
} 

Еще один комментарий, который может Помогите. Когда я проверяю элемент на Chrome и наведите указатель мыши на «../ images/glyphics ...» в правой части раздела элемента проверки, Chrome ссылается на localhost: 3000/assets /../ images/glyphicons-halflings.png as путь, который НЕ является правильным путем из корня моего приложения. Я подозреваю, что это просто сокращение в Chrome, но, опять же, кажется странным, что они не приведут правильный путь, если это не корень моей проблемы. Тем не менее, я до сих пор не знаю, как это исправить.

Answer 1

TL; DR: использование самозагрузка-дерзость камня вместо (остальные ниже ответа предлагает бутстраповских-рельсы драгоценных камня, который не так удобно, потому что тогда вам нужна другая зависимость, как МЕНЬШЕ, и он становится немного сложным.

Прежде всего, я должен упомянуть, что есть несколько способов добавить Bootstrap в ваше приложение. Сначала я попробовал ручной путь (что, я подозреваю, это то, что вы делаете) и действительно попал в ту же проблему, что и вы (не уверен, что по той же причине или нет). Итак, я пробовал рекомендованный способ, который через жемчужину называется twitter-bootstra p-rails. Я после этого railscast:

http://railscasts.com/episodes/328-twitter-bootstrap-basics

Тогда я столкнулся с проблемой, однако, не имея другой драгоценный камень - «меньше», который вызывает неприятную ошибку во время выполнения. Итак, я добавил еще два драгоценных камня, в общей сложности три, в мой Gemfile: - gem 'twitter-bootstrap-rails' - gem 'therubyracer' - gem 'less-rails' (отсутствует это было причиной для ошибка времени выполнения).

Их точная роль, о которой я до сих пор не уверен, но они играют важную роль в конвейере Rails. «less» - это то, от чего зависит Bootstrap, по-видимому, вместо «sass», с которым работает Rails.

Итак, после установки их bundle install - те, и другие их зависимости, наиболее заметным libv8 - я получил Bootstrap прекрасно работает, в том числе <i class="icon-share-alt"></i> =)

Answer 2

Я предполагаю, что вы используете Rails версии 3.1 или новее, так как вы упоминаете папку «активы», которая является частью функции Asset Pipeline Rails. Вкратце, все, что вы помещаете в папку «app/assets» в базе вашего проекта rails, автоматически маршрутизируется в папку assets на вашем сервере.Например:

• your_app/app/assets/stylesheets/style.css >>>localhost:3000/assets/style.css
• your_app/app/assets/images/button.png >>>localhost:3000/assets/button.png
• your_app/app/assets/javascripts/script.js >>>localhost:3000/assets/script.js

Другими словами, рельсы позволяет организовать ваши файлы в исходной папке , но объединяет их все вместе для конечного пользователя в папке assets. Для получения дополнительной информации о трубопроводе активов см. Ruby on Rails Guides: Asset Pipeline.

Ваша проблема в том, что ваш CSS ничего не знает о рельсах, и когда его код интерпретируется в браузере, он видит себя в папке assets. Это также относится к другим изображениям и javascripts, которые у вас есть. Самым простым решением было бы изменить url("../images/glyphicons-halflings.png"); на url("/assets/glyphicons-halflings.png");. Это работает, потому что и файл CSS, и изображение будут видеть друг друга в папке assets при просмотре в браузере.

Вторым решением было бы использовать драгоценный камень сасс-рельсов. Если вы создали свое приложение с использованием метода по умолчанию, вы, скорее всего, найдете его в своем Gemfile. Если это так, то вы можете переименовать свой файл CSS с something.css в something.css.scss (или .css.sass, но я предпочитаю его). Это позволит вам использовать рельсы встроенной поддержки SASS, в частности, следующее:

background: image-url("glyphicons-halflings.png"); 
### Outputs: background: url(/assets/glyphicons-halflings.png); 

image-url команда при использовании в файле .css.scss ваших рельсов приложения будет заботиться о поиске изображения и выводе нужной папки ,

Третий вариант заключается в использовании драгоценного камня twitter-bootstrap-rails, который совместим с конвейером активов в Rails 3.1 или новее.

Answer 3

Для тех, кому интересно, почему иконки не отображаются в режиме производства, попробуйте заменить CSS свойство фоновое изображение с фоном вместо:

background: url(<%= asset_path 'glyphicons-halflings.png' %>); 

... и, возможно, добавить .erb расширение до конца ваш файл boostrap.css, чтобы помощник resource_path работал. Это без использования каких-либо самоцветов.

Подробнее об этом из другого вопроса here.

Answer 4

Я нашел это link, чтобы быть очень полезным.

Answer 5

См. Это answer. Это лучше, чем изменять файл css, где происходит переход к более новым версиям. Итак, ideia проста, создавайте маршруты к этим файлам или общие с помощью интерпретатора параметров. Другое простое решение помещает эти изображения в «public/img».