如何使用带有 Bootswatch 主题的字形/图标？答案

【问题标题】：How do I use Glyphs/Icons with Bootswatch theme?如何使用带有 Bootswatch 主题的字形/图标？
【发布时间】：2021-04-20 07:40:01
【问题描述】：

我正在尝试将 Glyphs 与 bootswatch 主题一起使用，但是当我包含 glyphs 的 CDN 时，它会影响主题（使元素开始变小）。

我应该如何编码？

xxx.html

<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- This line seems to cause the problem, but is required for glyphs -->
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
        
        <link rel="stylesheet" href="https://bootswatch.com/4/sandstone/bootstrap.min.css">
    </head>

    <body class="{% block body_class %}{% endblock %}">
      <div class="container">
        <p>User icon on a styled link button:
          <a href="#" class="btn btn-info btn-lg">
            <span class="glyphicon glyphicon-user"></span> User 
          </a>
        </p> 
      </div>
    </body>
</html>

【问题讨论】：

标签： html icons bootswatch

【解决方案1】：

作为我们设计的新手，有很多东西要学，我现在已经意识到Octicons nad 尤其是Iconify 的力量。

所以以上可以通过

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
...
<a href="#" class="btn btn-info btn-lg">
    <span class="iconify" data-icon="octicon:person-24" data-inline="false"></span> User 
</a>

【讨论】：