无法在iframe外部显示购物车字形

如何解决无法在iframe外部显示购物车字形

我正在尝试将购物车标志符号添加到我的网页中，但是显示不正确。我看到的不是购物车，而是正方形。

下面是一个演示，演示了我如何尝试使用字形创建按钮，其中第一个按钮有两个将按钮样式设置为黑色的类，第二个不带该类的按钮显示了字形的问题不显示与类无关，而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,#000000);
    background-image: -ms-linear-gradient( top,#000000);
    background-image: -o-linear-gradient( top,#000000);
  background-image: linear-gradient( to bottom,#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之外显示购物车吗？

谢谢。

解决方法

我的页面和我在此处发布的页面的页眉中必须包含以下内容。我没有意识到在使用unicode时这是必需的。

谢谢。

无法在iframe外部显示购物车字形

如何解决无法在iframe外部显示购物车字形

解决方法

相关推荐