Bootstrap-4 如何用自己的替换 html 复选标记实体？答案

【问题标题】：How does Bootstrap-4 replace an html checkmark entity with its own?Bootstrap-4 如何用自己的替换 html 复选标记实体？
【发布时间】：2021-01-30 01:19:03
【问题描述】：

我使用 HTML 实体 &#10004; 创建一个复选标记。在将 Bootstrap 添加到我的页面之前，实体显示为一个简单的黑色复选标记，这正是我想要的。 Bootstrap 将其更改为带有尖角的黑边绿色复选框。我无法弄清楚 Bootstrap 是如何做到的。实体代码不在 bootstrap.js 文件中。我可以找到解决方法，但我真的很想了解 Bootstrap 是如何做到这一点的。

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

复选标记的修改可能是由 Bootstrap 以外的东西完成的。

这是一个标准的 Bootstrap 4.6.0 安装。在我的电脑（Mac OS 11.1）上，复选标记与默认值保持不变：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<body class="p-4">
  Here is a check mark (&amp;#10004;): "&#10004;"
</body>

【讨论】：

【解决方案2】：

这是你的越橘：

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
      Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji";
}

你可以用 CSS 覆盖它：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<style>
.other-font {font-family: Arial;}
</style>

<body class="p-4">
  <p class="other-font">Here is a check mark (&amp;#10004;): "&#10004;"</p>
</body>

【讨论】：