Html Question posted in
Some basic documentation can be found here.

Html – FontAwesome Icons displays as white on iPad instead of Black as on other platforms making them almost invisible

I use FontAwesome icons in my web application. The application is not a website but installed on a users computer with the UI accessed via web-browser. The FontAwesome css sheets are installed locally as part of the application.

Everything seemed to be working fine

e.g

enter image description here

Html code for the icons as follows

    <button value="Rename Files" name="renamefiles" title="Rename Files" type="submit" form="form_id" data-toggle="tooltip" data-placement="bottom" style="background:transparent" class="btn">
        <i class="fa-light fa-folders fa-2xl">
        </i>
    </button>

However, although it works fine on PC and my Android based phone on my iPad the icons are white instead of black and almost invisible I tested with both Safari and Firefox, and they both had the same problem.

What could be the problem?

Tags:

2

Answers


  1. 0

    To make sure that the icon is always black, add the style="color: black;" attribute to the <i> tag (the icon).

    <button value="Rename Files" name="renamefiles" title="Rename Files" type="submit" form="form_id" data-toggle="tooltip" data-placement="bottom" style="background:transparent" class="btn">
    <i class="fa-light fa-folders fa-2xl" style="color: black;">
    </i>
</button>
    Login or Signup to reply.
  2. 0

    As user @SandeepM says, very likely the reason is because your ipad is using a dark theme.

    A simple way to fix that would be to set colors explicitly in your code. For example:

    i.fa-light,
i.fa-light:before,
i.fa-light:after{
   color:black;
}

    should change them to black.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search