Значки Font-Awesome не отображаются через BoostrapCDN
-
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://».
Решение:
- Измените путь CSS или сымитируйте его на своем локальном компьютере.
- Запустите локальный или удаленный 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