Hey there! So I've been working on a Gatsby application and ran into an issue with Font Awesome Icons when viewed in Safari. The icons seem to lose their shape and proportions compared to how they appear in Google Chrome.
Safari
https://i.sstatic.net/VGMjz.png
Google Chrome
https://i.sstatic.net/oPrwa.png
React
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDatabase } from '@fortawesome/free-solid-svg-icons'
<span className="awesome-parent">
<FontAwesomeIcon
className="major db-style awesome-icon"
icon={faDatabase}
/>
</span>
Styling
.awesome-parent {
display: inline-flex;
border: solid 1px;
border-radius: 100%;
margin: 0 0 2em;
padding: 0.5em;
border-color: lightgray;
.awesome-icon {
border: solid 1px;
border-radius: 100%;
height: 10em;
width: 10em;
padding: 2em;
}
.db-style {
color: _palette(db-blue);
border-color: lightgray;
}
}
Could anyone help me figure out what I might have done wrong? I have other icons styled similarly but with different colors, and they display correctly.
I'm still troubleshooting this issue, so if you'd like to take a look at the deployed website for debugging purposes:
Thanks!