Я'вэ не использовал никакие загрузочный инфраструктур. Я хочу включить некоторые технологии glyphicons в Bootstrap 3 на моей странице. Насколько я понимаю, они должны быть включены в начальную загрузку.файл CSS, который я'вэ добавил на мою страницу. Когда я'вэ посмотрел в ушко.CSS-файл, однако я Дон'т вижу никакой ссылки на них ? Хотя его большой файл может быть я что-то пропустил.
Я заметил, что когда я открыл папку Р
загружен с начальной загрузки 3 там отдельную папку шрифты
, который содержит файлы:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Кажется, это где технологии glyphicons, однако я Дон'т знаю, как прикрепить их на мой сайт? Как прикрепить технологии glyphicons на мою страницу ?
Спасибо за любую помощь заранее
Приведенный ниже код показывает, прилагаемый загрузочный.CSS-файл:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet" media="screen">
</head>
а вот и часть в HTML-код, показывающий, где технологии glyphicons должны быть:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
Destinations</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
Я думаю, что вашей конкретной проблемы-это'т, как использовать технологии glyphicons но понимание того, как загрузочный файлы работают вместе.
Бутстреп требует специальную файловую структуру для работы. Я вижу из вашего кода, у вас есть это:
<link href="bootstrap.css" rel="stylesheet" media="screen">
Ваш Бутстрап.CSS не загружается из того же места, как Вашей странице, это создаст проблемы, если вы не't отрегулируйте структуру файла.
Но сначала, позвольте мне порекомендовать вам настроить структуру папок например, так:
/css <-- Bootstrap.css here
/fonts <-- Bootstrap fonts here
/img
/js <-- Bootstrap JavaScript here
index.html
Если вы заметили, это также, как Bootstrap структуры, файлы в скачать zip.
Затем вы включаете свой загрузочный файл вот так:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
В зависимости от структуры вашего сервера или то, что вы'ре собирается.
Первый и второй по отношению к Ваш файл'с текущего каталога. Второй просто более откровенен, сказав, что "Здесь" (./) первый потом папку CSS (и CSS).
Третий-хорошо, если вы'вновь запущен веб-сервер, а можно просто использовать по отношению к корневой системе счисления в качестве ведущего и"/", будет всегда начинаться в корневой папке.
Итак, зачем это делать?
Бутстрап.CSS имеет этой конкретной линии для Glyphfonts:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Как вы видите, что Glyphfonts загружаются, зайдя на один каталог вверх../
, а затем ищете папку шрифты
и потом загрузка файла шрифта.
URL-адрес является относительно расположения файла CSS. Так что, если ваш CSS-файл находится в том же месте, как это:
/fonts
Bootstrap.css
index.html
CSS-файл будет один уровень глубже, чем искать папку шрифты
.
Итак, давайте's отмечают фактическое местоположение этих файлов:
C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html
Файл CSS будет технически ищем папку:
C:\fonts
но твой папка на самом деле в:
C:\www\fonts
Так посмотреть, если это помогает. Вы Don'т иметь, чтобы сделать что-нибудь 'специальные' загрузить загрузочный технологии glyphicons, за исключением убедитесь, что ваша структура каталогов создана правильно.
Когда вы получите это исправлено, ваш HTML должен просто быть:
<span class="glyphicon glyphicon-comment"></span>
Обратите внимание, что нужно и классов. Устанавливает первый класс glyphicon
до основных стилей, в то время как glyphicon-комментарий
задает конкретный образ.