Databases
StackOverflow2013
Postsdbo
POdata-icon attribute on android browsers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdata-icon attribute on android browsers
    text
    copied!<p>Has anyone see some odd layout issues with a <code>data-icon</code> attribute on android mobile browsers?</p> <p>I'm working on a responsive site and I'm noticing that in my test on some android phones (Droid Razr and Samsung Galaxy II) that the font icon that I'm using for my responsive menu seems to be ignoring some of the padding on the parent element.</p> <p>But it appears correcly on my iPhone and on my 1st generation Droid.</p> <p>Here are some screen shots:</p> <p>Droid and Galaxy:</p> <p><img src="https://i.stack.imgur.com/BGgER.png" alt="enter image description here"></p> <p>iPhone (iOS):</p> <p><img src="https://i.stack.imgur.com/h3CdJ.png" alt="enter image description here"></p> <p>I'm also testing it out through Adobe edge inspect and I can't see anything within the CSS that would make it just ignore the parent elements padding.</p> <p>Here's the current markup for that menu item:</p> <p>HTML:</p> <pre><code>&lt;a class="open" href="#menu-main-nav"&gt;Menu&lt;span data-icon="a"&gt;&lt;/span&gt;&lt;/a&gt; </code></pre> <p>CSS (SCSS to be specific):</p> <pre><code>.open{display: none; float: right; font: 2em $rosewood; margin-top: 30px; span{vertical-align: -3px;} @media screen and (max-width: 959px) {display: block;} } </code></pre> <p>And here's the CSS for the <code>data-icon</code> attribute:</p> <pre><code>@font-face { font-family: "untitled-font-1"; src:url("fonts/untitled-font-1.eot"); src:url("fonts/untitled-font-1.eot?#iefix") format("embedded-opentype"), url("fonts/untitled-font-1.ttf") format("truetype"), url("fonts/untitled-font-1.svg#untitled-font-1") format("svg"), url("fonts/untitled-font-1.woff") format("woff"); font-weight: normal; font-style: normal; } [data-icon]:before { font-family: "untitled-font-1" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "untitled-font-1" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .icon-align-justify:before { content: "a";} </code></pre> <p>So, I'm not sure if it's just me or if it's something that I'm missing.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload