如何在烧瓶模板中添加引导字形图标？答案

【问题标题】：How to add a bootstrap glyphicons in a flask template?如何在烧瓶模板中添加引导字形图标？
【发布时间】：2018-10-13 21:38:28
【问题描述】：

我对烧瓶还是很陌生...我想在我的烧瓶模板中添加一个字形图标，但它没有出现...

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

【问题讨论】：

标签： html css twitter-bootstrap glyphicons

【解决方案1】：

您正在使用 Bootstrap 4，而这个没有 ICONS 库。 Glyphicons 是 Bootstrap 3 的一部分，现在已被删除，这就是为什么您什么都看不到的原因。如果你想要一个图标库，你可以包含 font-awesome 库（例如）。阅读下一个链接的更多信息：

Icons On Boostrap 4

Font Awesome Library

你可以在下一个sn-p上看到一个使用示例。另请注意，您之前包含错误顺序的库，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>

【讨论】：