Как добавить начальные глифы в шаблон колбы? - PullRequest
Новая
       40

Как добавить начальные глифы в шаблон колбы?

0 голосов
/ 13 октября 2018

Я все еще новичок в колбе ... Я хочу добавить глифик в шаблон колбы, но он не появляется ... 

<!DOCTYPE html>
<html>
<head>
    <title>breakdiet</title>

    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/essentials.css') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</head>
<body>

<h1 class="logo">breakdiet</h1>
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
</body>
</html>

1 Ответ

0 голосов
/ 13 октября 2018

Вы используете Bootstrap 4 , и этот не поставляется с библиотекой ICONS .Глификоны были частью Bootstrap 3 и были отброшены сейчас, поэтому вы ничего не видите.Вы можете включить библиотеку font-awesome (например), если вам нужна библиотека значков.Подробнее по следующим ссылкам:

Иконки на Boostrap 4

Font Awesome Library

Вы можете увидеть пример использованияна следующем фрагменте.Также обратите внимание, что вы включаете библиотеки в неправильном порядке ранее, Proppet и JQuery должны быть включены до Bootstrap . 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div>You can see an icon below:</div>
<div><i class="fas fa-3x fa-ghost"></i></div>
...