Как включить глификон в бутстрап 3

Я раньше не использовал какие-либо фреймворки bootstrap. Я хочу включить некоторые из глификонов в bootstrap 3 на моей странице. Насколько я понимаю, они должны быть включены в файл bootstrap.css, который я добавил на свою страницу. Однако, когда я смотрел файл bootstrap.css, я не вижу ссылки на них? Хотя это большой файл, я, возможно, что-то пропустил.

Я заметил, что когда я открыл папку dist, загруженную из бутстрапа 3, есть отдельная папка fonts, которая содержит файлы с именем:

glyphicons-halflings-regular.eot 
glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 
glyphicons-halflings-regular.woff

Кажется, что именно там, где глификоны, я не знаю, как их присоединить к моему сайту? Как привязать глификоны к моей странице?

Спасибо за любую помощь заранее

В приведенном ниже коде показан загруженный файл bootstrap.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, где глификоны должны быть:

      <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>

Ответы

Ответ 1

Я думаю, что ваша конкретная проблема заключается не в том, как использовать Glyphicons, а в понимании того, как файлы Bootstrap работают вместе.

Для загрузки Bootstrap требуется определенная файловая структура. Я вижу из вашего кода, что у вас есть это:

<link href="bootstrap.css" rel="stylesheet" media="screen">

Загружаемый Bootstrap.css загружается из того же места, что и ваша страница, это создаст проблему, если вы не изменили структуру вашего файла.

Но сначала позвольте мне порекомендовать вам настроить структуру вашей папки следующим образом:

/css      <-- Bootstrap.css here
/fonts    <-- Bootstrap fonts here
/img
/js       <-- Bootstrap JavaScript here
index.html

Если вы заметили, это также то, как Bootstrap создает свои файлы в ZIP-архиве.

Затем вы включаете свой файл Bootstrap следующим образом:

<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).

В-третьих, хорошо, если вы используете веб-сервер, и вы можете просто использовать относительную корневую нотацию, поскольку ведущий "/" всегда будет запускаться в корневой папке.

Итак, зачем это делать?

Bootstrap.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 загружаются, поднимаясь вверх по одному каталогу ../, а затем ищу папку под названием /fonts и THEN загружая файл шрифта.

URL-адрес относится к местоположению файла CSS. Итак, если ваш CSS файл находится в одном месте:

/fonts
Bootstrap.css
index.html

Файл CSS будет на один уровень глубже, чем поиск папки /fonts.

Итак, скажем, фактическое расположение этих файлов:

C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html

Файл CSS будет технически искать папку по адресу:

C:\fonts

но ваша папка находится на самом деле:

C:\www\fonts

Так что посмотрим, поможет ли это. Вам не нужно делать что-либо "специальное" для загрузки глифов-бутстрапов, за исключением того, что ваша структура папок настроена соответствующим образом.

Когда вы получите это исправление, ваш HTML должен просто быть:

<span class="glyphicon glyphicon-comment"></span>

Заметьте, вам нужны оба классы. Первый класс glyphicon устанавливает базовые стили, а glyphicon-comment устанавливает конкретное изображение.