Возникли проблемы с отображением глифа корзины вне 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, #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
person Community    schedule 14.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Моя страница и та, которую я разместил здесь, должны иметь следующее в заголовке. Я не понимал, что это необходимо при использовании юникода.

Спасибо.

person Community    schedule 14.09.2020