我正试图将购物车图示符添加到我的网页中，但它没有正确显示。我看到的不是购物车，而是一个广场。
下面是一个演示，展示了我如何尝试创建一个带有字形的按钮，其中第一个按钮有两个类，将按钮样式设置为黑色，没有类的第二个按钮显示字形不显示的问题与类无关，还有一个iframe，显示w3schools的部分代码，该代码确实正确地显示了购物车。此外，我在iframe中添加了不带类的按钮，以表明它也能正确地显示在ifame中。
最后，在演示的底部，我在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;" ></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;" ></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"></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;"></button>'></iframe>
</td>
</tr>
</table>
<br />
☹有人能告诉我为什么我不能在iframe外面展示购物车吗？
谢谢。
我的页面和我在这里发布的页面需要在标题中包含以下内容。在使用unicode时，我没有意识到这是必要的。
谢谢。