Шрифт awsome иконки, которые не отображаются в шаблонах jade

Я использую jade для templating в моем приложении node.js/express. но когда я пытаюсь использовать шрифт awesome, иконки не отображаются, только список пуль. Я пробовал все методы, найденные поисковой системой. таких как fa.fa-globe issue. вот это код взят из footer.jadeШрифт awsome иконки, которые не отображаются в шаблонах jade

span This is some other footer stuff. 
    ul 
     li.fa.fa-google-plus 
     a(href='#') 
     i.fa.fa-facebook 
     li 
     a(href='#') 
     i.fa.fa-lg.fa-twitter 
     li 
     a(href='#') 
     i.fa.fa-lg.fa-google-plus 
     li 
     a(href='#') 
     span.fa.fa-lg.fa-linkedin 
span and some more footer stuff.

Как вы можете видеть выше, существуют различные методы, которые я пробовал, я, пролетных и классы

И мой layout.jade выглядит следующим образом:

doctype html 
html 
    head 
    title= title 
    meta(name='viewport', content='width=device-width, initial-scale=1.0') 
    link(href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css', rel='stylesheet', media='screen') 
    link(href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css') 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    include ./header.jade 
    body(style="padding-bottom:10rem;") 
    block content 

    script(src='http://code.jquery.com/jquery.js') 
    script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')

благодаря

источник

2015-08-02 OverRipeBananas

Основная проблема заключается в том, что вы упускаете атрибут rel='stylesheet' для шрифта-удивительным <link>. Это заставит работать над шрифтами.

Однако, если вы пытаетесь получить значки, чтобы заменить пули в списке, вам нужно настроить элементы списка нижнего колонтитула как shown на странице примеров шрифтов. Например:

span Hello world 
    ul.fa-ul 
    li 
     i.fa-li.fa.fa-facebook 
     a(href='#') Facebook 
    li 
     i.fa-li.fa.fa-lg.fa-twitter 
     a(href='#') Twitter 
    li 
     i.fa-li.fa.fa-lg.fa-google-plus 
     a(href='#') Google+ 
    li 
     i.fa-li.fa.fa-lg.fa-linkedin 
     a(href='#') LinkedIn

источник

2015-08-02 14:13:29 mscdex

Спасибо, это гениально. теперь он показывает их как вертикальный список, есть ли быстрое исправление, чтобы получить их горизонтальные? – OverRipeBananas

Если вы видите пустой символ, где она должна быть, возможно, потребуется добавить кодировку в голову макета:

meta(charset="utf-8")

источник

2015-11-13 19:18:21

Шрифт awsome иконки, которые не отображаются в шаблонах jade

ответ

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