Font awesome icon breaks plugin

[auryn_macmillan]

I’ve installed a couple of OAuth2 plugins, and noticed that they all seem to use a bit of an ugly hack in order to place the an icon on their relative login button. Being the genius that I am, I figured I’d go ahead and replace it with a font awesome icon, then relish in the glory of my accomplishment. Much to my dismay, this seems to break discourse before the build is complete.

The minor changes to plugin.rb are shown below, any insight as to why it breaks and if there is a clean workaround would be greatly appreciated.

###Original, will compile:

register_css <<CSS

  .btn-social.slack {
    background: #08c;
    text-indent: 19px;
  }

  .btn-social.slack:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    margin-left: -22px;
    margin-top: 1px;
    background-image: url('data:image/png;base64,[encoded image removed to save space]');
  }

CSS

###My edit, will not compile:

register_css <<CSS

  .btn-social.slack {
    background: #08c;
    text-indent: 19px;
  }

  .btn-social.slack:before {
    content: "\f198";
  }

The reason I’d like to use the font awesome icons instead is to avoid this buggy scrolling behaviour:

[mpalmer (Matt Palmer)]

What’s the error you get?

[sam (Sam Saffron)]

@auryn_macmillan

position: absolute;

Well you can not be positioning like that, unless #login-buttons has some sort of positioning. Even if it does it is probably a very hacky way of positioning stuff.

Try without position absolute.

[auryn_macmillan]

@sam

Try without position absolute.

Without position absolute the icon disappeared altogether

@mpalmer

What’s the error you get?

Need to get some sleep, will try to reproduce the error tomorrow and get back to you.

[cpradio]

So it seems your issue is due to the existing styles

plugin.rb

So you would need to undo those when you apply your own (or fork the repo and use that so you can edit the CSS utilized).

This may work?

  .btn-social.slack:before {
    content: "\f198";
    position: initial;
    height: auto;
    width: auto;
    margin-left: auto;
    margin-top: auto;
    background-image: none;
  }

And if that still doesn’t work, try adding

    margin-right: 9px;
    font-family: FontAwesome;
    font-size: 17px;

[auryn_macmillan]

Ok, mystery solved. A second backslash did the trick, working like a charm now with no need to mess around with any of the other positioning rules.

Fix courtesy of night over of GitHub - GitHub - night/discourse-auth-twitch: Twitch API OAuth for Discourse

.btn-social.slack:before {
    content: "\\f198";
}