3

I've been using Font awesome (6.1.0) without any problem in my app until I decided to introduce Dark theme option. Regarding icons the only style that I change is their color:

From: enter image description here To: enter image description here

If you look closely enough you'll see the difference (its thickness).

Code:

<i class="far fa-calendar-plus fa-3x"></i>

As I've deeply analised, all the computed variables remain the same (except the color obviously)

Original (light theme):

enter image description here

Dark theme:

enter image description here

Could you please help me with this issue?

Edit: Include measurements (as asked) enter image description here enter image description here enter image description here enter image description here

Edit 2: Snippet added

<link href="https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet"/>

<div style="background-color:white">
<span style="color:black">Light</span>
<i class="fa-solid fa-calendar-plus fa-5x"></i>
</div>
<div style="background-color:black">
<span style="color:white;margin-right:5px">Dark</span>
<i class="fa-solid fa-calendar-plus fa-5x" style="color:#FFF"></i>
</div>
Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
  • Not reproducible with the provided code, seems like the contrast makes it look bigger. Try to measure it using a screen ruler (You can use the new feature in Power Toys for windows Or this chrome extension : https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj ) – ATP Oct 21 '22 at 13:46
  • Screenshots with measurements included – Ignacio Ara Oct 21 '22 at 14:19
  • 1
    Can you create an a working snippet of the 2 icons? – ATP Oct 21 '22 at 14:25
  • 1
    On my browser (Edge/Windows10) laptop it seems that any color which is non zero in at least 2 of the R, G, B settings makes the icon wider than any color which has no non-zero R, G, B settings or just one of R, G, B noero (although I haven't been through every possible combination). It looks as though therefore it's dependent on how the edge color is calculated. – A Haworth Oct 21 '22 at 16:06

0 Answers0