CODEWITHSUNDEEP
htmlunicodeglyph
user2505564
user2505564

Reputation:

Having trouble showing the shopping cart glyph outside of an iframe

I'm trying to add the shopping cart glyph to my web-page, but it isn't showing properly. Instead of the shopping cart, i'm seeing a square.

Below is a demonstration that shows how I'm trying to create a button with the glyph, where the first button has two classes that style the button to be black, the second button without the classes shows that the problem with the glyph not showing has nothing to with the classes, and an iframe to show part of the code that w3schools had that does properly shows the shopping cart. Also, I added the button without classes to the iframe to show that it too, properly shows in the iframe.

Finally, at the bottom of the demo, I included a sad face character outside of the iframe to show that it shows properly, even though both the shopping cart and the sad face use unicode utf-8, only the sad face shows properly. I believe that this shows that there isn't a problem with the relevant meta tag.

.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;

Any one able to tell me why I can't display the shopping cart outside of the iframe?

Thanks.

Upvotes: 0

Views: 68

Answers (1)

user2505564
user2505564

Reputation:

My page and the one I posted here need to have the following in the header. I didn't realize that this was necessary when using unicode.

Thanks.

Upvotes: 0

Related Questions