FontAwesome / ‘Gizmo’ font conflict

  • Resolved scallemang

    (@scallemang)


    6 years, 11 months ago

    Hi there,

    I’m using the Salient theme which comes bundled with FontAwesome. The CSS relating to Seriously Simple’s icons and the Salient/FA stylesheet come into conflict.

    If you look at the URL I shared, you can see this in effect both in the SSS player (share; download icons) and the theme’s share button (the Material-y button fixed to the bottom-right). Might have to namespace things a bit more? Anyway, I’m sure you’ll come up with a workable solution.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Craig Hewitt

    (@podcastmotor)

    Hi there, thanks for the message. Definitely something we will look into. We’ll be iterating the player here in the next week or so and will definitely put this on our list of things to evaluate.

    Craig

    Thread Starter scallemang

    (@scallemang)

    Cool, great. FYI, I’ve written some custom CSS and reverted to the minimal player on my site to troubleshoot the issue but can provide a screenshot or whatever you need if that helps. FWIW, it was the CSS targeting the cloud-download icon: something quite general like [class*=”icon-] { font-family: ‘Gizmo’…}. And, on the other hand, a bunch of styles were cascading down from Salient’s equivalent, catch-all icon classes and messing with the styles of some of the plugin’s icons.

    I am having a similar issue to you @scallemang regarding the conflict with Salient theme, but in addition I am finding that the issue extends to the entire site’s icon set as a result of the plugin, that is to say it is an issue not just confined to the player.

    I have not looked into fixing it yet, though thanks for the starting point for a temp repair!

    Plugin Author Craig Hewitt

    (@podcastmotor)

    Thanks for the updates and the further insights into how this is affecting your theme. We are going to be working on a release for next week that will make the namespacing of some of our classes more robust, and should solve most of these issues.

    Craig

    You are overriding all icons in my template who’s class start with or includes “icon-“, forcing them to use the “gizmo” font. This breaks every icon on my site. Using

    This snippet is from gizmo.css: 

    [class^="icon-"]:before, [class*="icon-"]:before {
  font-family: "gizmo" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

    This snippet is from icon_fonts.css: 

    [class^="icon-"], [class*="ssp-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering ========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    • This reply was modified 6 years, 11 months ago by Kimball31.
    Plugin Contributor Jonathan Bossenger

    (@psykro)

    Hi @scallemang, @lepalose and @kimball31

    We just released an updated version of the plugin which fixes the bug with the font icons

    Please update to version 1.19.3 of the plugin and let us know if the problem persists

    Thanks
    Jonathan

    Thread Starter scallemang

    (@scallemang)

    @psykro

    Awesome, thanks so much for the great support! (Is your username a EWJ reference? Nice!)

    • This reply was modified 6 years, 11 months ago by scallemang.

    Hi @psykro

    The update did indeed work for me, thanks for the quick turn around on this issue

    Cheers,
    Lep

    Plugin Contributor Jonathan Bossenger

    (@psykro)

    @scallemang, thanks for the update. And in answer to your question, no, but it would be a lot cooler if it was ??

    @lepalose thanks for the update and your kind words. Our team tries as hard as possible to resolve issues as soon as they are reported.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘FontAwesome / ‘Gizmo’ font conflict’ is closed to new replies.