在 iframe 之外显示购物车字形时遇到问题答案

【问题标题】：Having trouble showing the shopping cart glyph outside of an iframe在 iframe 之外显示购物车字形时遇到问题
【发布时间】：2020-09-14 04:29:29
【问题描述】：

我正在尝试将购物车字形添加到我的网页，但它没有正确显示。我看到的不是购物车，而是一个正方形。

下面是一个演示，展示了我如何尝试使用字形创建一个按钮，其中第一个按钮有两个将按钮样式设置为黑色的类，第二个没有类的按钮显示字形的问题不显示与课程无关，并且 iframe 显示 w3schools 拥有的部分代码可以正确显示购物车。另外，我将没有类的按钮添加到 iframe 以显示它也可以正确显示在 iframe 中。

最后，在演示的底部，我在 iframe 之外添加了一个悲伤的面孔字符，以表明它正确显示，即使购物车和悲伤的面孔都使用 unicode utf-8，但只有悲伤的面孔显示适当地。我相信这表明相关的元标记没有问题。

.button_idex_last {
  margin-right: 0;
}
.button_index {
  color: white;
  text-align: center;
  border-style: solid;
  border-width: 2px;
  border-color: #474747;
  min-width: 1em;
  margin-right: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 15px;
  font-family: arial, helvetica, sans-serif;
  padding: 2px;
  display: inline-block;
  font-weight: bold;
  background-color: #45484d;
  background-image: -webkit-gradient( linear, left top, left bottom, from( #6a6a6d), to(#000000));
  background-image: -webkit-linear-gradient( top, #6a6a6d, #000000);
    background-image: -moz-linear-gradient( top, #6a6a6d, #000000);
    background-image: -ms-linear-gradient( top, #6a6a6d, #000000);
    background-image: -o-linear-gradient( top, #6a6a6d, #000000);
  background-image: linear-gradient( to bottom, #6a6a6d, #000000);
  filter: progid: DXImageTransform:Microsoft.gradient(GradientType=0; startColorstr=#6a6a6d; endColorstr=#000000);
}

<table>
  <tr>
    <td>
      Shopping Cart Button 1<br />
      <button class="button_index button_index_last"
              style="position: relative;
                     top: 1px;
                     float: left;
                     font-family: 'Glyphicons Halflings';
                     font-size: xx-large;
                     font-weight: 400;
                     line-height: 1;
                     -webkit-font-smoothing: antialiased;
                     -moz-osx-font-smoothing: grayscale;" >&#xE116;</button>
    </td>
    <td>
      Shopping Cart Button 2<br />
      <button style="position: relative;
                     top: 1px;
                     float: left;
                     font-family: 'Glyphicons Halflings';
                     font-size: xx-large;
                     font-weight: 400;
                     line-height: 1;
                     -webkit-font-smoothing: antialiased;
                     -moz-osx-font-smoothing: grayscale;" >&#xE116;</button>
    </td>
    <td>
      Shopping Cart Button 3<br />
      <iframe srcdoc='<head>
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                      </head>
                      <body>
                        <p>
                          Shopping-cart icon on a styled link button:
                          <a href="#" class="btn btn-info btn-lg">
                            <span class="glyphicon glyphicon-shopping-cart"></span>
                            Shopping Cart
                          </a>
                        </p> 
                        <p>
                          Unicode:
                          <span class="glyphicon">&#xe116;</span>
                        </p>
                        <button style="position: relative;
                                       top: 1px;
                                       float: left;
                                       font-family: Glyphicons Halflings;
                                       font-size: xx-large;
                                       font-weight: 400;
                                       line-height: 1;
                                       -webkit-font-smoothing: antialiased;
                                       -moz-osx-font-smoothing: grayscale;">&#xE116;</button>'></iframe>
    </td>
  </tr>
</table>
<br />
&#x2639;

谁能告诉我为什么我不能在 iframe 之外显示购物车？

谢谢。

【问题讨论】：

标签： html unicode glyph

【解决方案1】：

我的页面和我在这里发布的页面需要在标题中包含以下内容。我没有意识到在使用 unicode 时这是必要的。

谢谢。

【讨论】：