Font awesome icon breaks plugin

Product Support

AI-generated summary

In a Support topic titled “Font awesome icon breaks plugin,” auryn_macmillan reports that replacing a base64 image icon with a Font Awesome icon in OAuth2 plugin CSS causes Discourse to fail during build. The original CSS used position: absolute to position the icon, which sam notes is fragile and suggests removing it — but auryn_macmillan finds the icon vanishes without it. mpalmer asks for the specific error, which auryn_macmillan promises to provide later. cpradio suggests resetting conflicting styles and adding font-family: FontAwesome and font-size, but the real fix comes from auryn_macmillan, who discovers that escaping the Unicode character with a double backslash — content: "\\f198"; — resolves the issue entirely, requiring no other CSS adjustments. The solution was inspired by a GitHub repo by night. The original motivation was to fix a buggy scrolling behavior caused by the image-based icon.

1

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:

Pasted image716×252 20.3 KB

Pasted image734×210 17.2 KB

2

What’s the error you get?

3

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.

4

Without position absolute the icon disappeared altogether :sweat:

Pasted image723×120 9.3 KB

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

5

So it seems your issue is due to the existing styles

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;
6

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 · GitHub

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