Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

KeenIcons svg looks weird at safari


Hi there,

When I update newest version, I found the KeenIcons looks weird at Safari. Please use Safari to check this web page and take a look at header's dark mode menu. The center part of the item "Light" icon seems to be displaced.

Check this

https://drive.google.com/file/d/1TxR2eL6eE5p6vqEFCwkv6jvpzSrhpGfO/view?usp=sharing

thanks~~


user
Virgil Liou 9 months ago
HTML
2 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

S
Sean Author9 months ago

Hi,

Thank you for your feedback.

It seems Safari has an issue rendering icons when the body's root font size is set to 13px.
You can fix this on your end by changing the body's root font size to 12px or 14px(it should be an even value) via $app-general-root-font-size-desktop in the global SASS variables and recompiling your assets:


// General
$app-general-root-font-size-desktop: 13px;
$app-general-root-font-size-tablet: 12px;
$app-general-root-font-size-mobile: 12px;


We will fix this issue in the next update by globally adjusting the spacing/margins according to font size 14px.

Regards.
<pre>


S
Sean Author9 months ago

Hi,

Please ignore this fix. We found a better solution and we will push a fixed version of Keenicons CSS by tomorrow and you can redownload it from Themeforest.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(