Значки Font-Awesome не отображаются через BoostrapCDN

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

Вопрос

Я пытаюсь использовать значковые шрифты Font-Awesome через ссылку BootstrapCDN, и я почти уверен, что у меня установлена ​​последняя версия:

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

Я поместил эту ссылку в <head> часть моего html-файла, и я пытаюсь заставить его работать с этим простым html-кодом:

<!DOCTYPE html>
<html>
<head>
    <title>Font-Awesome Icons</title> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>

Однако это не рендеринг.Я пробовал этот код в последних версиях FireFox (27), Safari (7) и Chrome (33).Я проверил, что fa класс находится на каждом из значков, которые я пытаюсь вызвать, а также что fa- префикс используется в отличие от старого icon- префикс.Я проверил свою реализацию кода с помощью этого видео http://headwaythemes.com/using-font-awesome-with-headway/ (хотя это и предназначено для темы WordPress, в принципе код должен работать одинаково) и посмотрел на переполнение стека, но предыдущие вопросы, такие как Fontawesome не загружается не помогли мне в решении моего вопроса.

У меня не установлен Fontawesome.otf, но, конечно, это не так, если я вижу глифы при посещении http://fortawesome.github.io.
Должен ли я просто загрузить и разместить потрясающие файлы шрифтов вместе со всем моим будущим веб-сайтом, чтобы мне не пришлось беспокоиться об обновлении ссылки BoostrapCDN?- Даже если я планирую использовать всего несколько значков?

Это было полезно?

Решение

Причина, по которой он не загружается, заключается в том, что URI начинается с «//».Это означает, что это относительный путь протокола, то есть он будет использовать любой протокол, который использует эта страница.Если вы откроете свой HTML локально, ваш браузер будет использовать файл в качестве протокола, таким образом пытаясь получить доступ к потрясающему шрифту CSS с помощью «file://».Если вы получаете доступ к своему html с помощью локального или удаленного веб-сервера http, вы получите доступ к странице, используя http протокол, таким образом получая доступ к CSS с помощью «http://».

Решение:

  1. Измените путь CSS или сымитируйте его на своем локальном компьютере.
  2. Запустите локальный или удаленный http-сервер и получите доступ к странице.

Для получения дополнительной информации:URI, начинающийся с двух косых черт...как они себя ведут?

Другие советы

Более простой способ справиться с этим — просто добавьте «http:» перед строкой cdn, и он будет работать на вашем локальном компьютере, т. е.так:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Та-даа!

То, что ответил Пулкит, абсолютно верно.Добавлю: если вы хотите быстро создать локальный сервер, просто перейдите в каталог страниц html и css, а затем перейдите в терминал и введите —

$python -m SimpleHTTPServer

Затем перейдите в свой браузер и перейдите к 127.0.0.1:8000, если он не отображается, попробуйте изменить домашнюю страницу вашего сайта на index.html

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top