CSS glitch in Safari with Ionicons as background content and absolute positioning

Question

I created my first website using SASS (Compass) and I really like it, it's a very handy tool. I also added Font Awesome and used it quite frequently, because I want to optimize for Retina desiplays as well and therefore use less graphics.

The project I'm working on deals with feedback and discussions online, hence I want to place a '+' and '-' symbol as background inside the two bars: https://www.orat.io/stmt/42

This is the code for the '+' symbol:

.bar {
  height: 3em;
  background: lighten($pro-color, 20);
  position: relative;
  @extend %global-border-radius;
  margin-bottom: $margin / 2;
  &:before {
    position:absolute;
    top: -14px;
    right: 4px;
    font-size: 5em;
    color: #f8f8f8;
    content: "\f1c9";
    font-family: ionicons;
    }
  .inner {
    position: absolute;
    background: $pro-color;
    text-align: right;
    color: #fff;
    font: 300 2.25em $font-primary;
    padding: 0 10px;
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 8%;
    @extend %global-border-radius;
  }
}

The problem is that in Safari (especially on iOS) the icons are strangely positioned. I tried to change various parameters but it didn't work. Everything is fine in Chrome, Firefox etc.

Any tips? Thanks guys

Answer 1

Solved it! It was important to specifically set the line-height :)

Answer 2

I check on Safari & Chrome on iOS , it looks like you just need to little bit fiddle around with the CSS, it could be a position issue. See the selector for ".bar" in your code and check the pseudo elements positioning.

you can try this for the "+" (same idea goes for "-");

&:before {
  position:absolute;
    top: 0;     // set positionings as zero
    right: 0;
    font-size: 5em;
    color: #f8f8f8;
    content: "\f1c9";
    font-family: ionicons;
    margin-top: -13px;    //fiddle around with the margins
    margin-right: 4px;
}