# Font awesome icon breaks plugin

**URL:** <https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995>\
**Category:** Support\
**Created:** [2016 年 9 月 12 日午前 3:47 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995 "2016-09-12T03:47:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![auryn\_macmillan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/auryn_macmillan/32/56633_2.png) [@auryn\_macmillan](https://meta.discourse.org/u/auryn_macmillan)\
**Post date:** [2016 年 9 月 12 日午前 3:47 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/1 "2016-09-12T03:47:07Z")

</div>

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:

```plaintext
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:

```plaintext
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:

 ![](https://global.discourse-cdn.com/meta/original/3X/f/a/fa43206756b832fbef067d14129ac70d091b1fce.png)

 ![](https://global.discourse-cdn.com/meta/original/3X/2/7/27203f0c1264ed3bdfa05171e7de987c2562860d.png)

---

<div class="post-metadata">

**Author:** ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)\
**Post date:** [2016 年 9 月 12 日午前 3:49 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/2 "2016-09-12T03:49:05Z")

</div>

What’s the error you get?

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2016 年 9 月 12 日午前 4:01 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/3 "2016-09-12T04:01:12Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![auryn\_macmillan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/auryn_macmillan/32/56633_2.png) [@auryn\_macmillan](https://meta.discourse.org/u/auryn_macmillan)\
**Post date:** [2016 年 9 月 12 日午前 4:19 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/4 "2016-09-12T04:19:05Z")

</div>

> [@sam](#):
>
> Try without position absolute.

Without position absolute the icon disappeared altogether 😓

 ![](https://global.discourse-cdn.com/meta/original/3X/3/d/3dcd8106444fb04da981e41e89ff032c75860fb8.png)

> [@mpalmer](#):
>
> What’s the error you get?

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

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2016 年 9 月 12 日午前 10:32 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/5 "2016-09-12T10:32:49Z")

</div>

So it seems your issue is due to the existing styles

> <https://github.com/4xposed/oauth-slack-discourse/blob/master/plugin.rb#L121-L129>

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?

```plaintext
  .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

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

```

---

<div class="post-metadata">

**Author:** ![auryn\_macmillan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/auryn_macmillan/32/56633_2.png) [@auryn\_macmillan](https://meta.discourse.org/u/auryn_macmillan)\
**Post date:** [2016 年 9 月 12 日午後 2:43 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/6 "2016-09-12T14:43:58Z")

</div>

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](https://github.com/night/discourse-auth-twitch)

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

```

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2024 年 6 月 8 日午後 12:45 UTC](https://meta.discourse.org/t/font-awesome-icon-breaks-plugin/49995/7 "2024-06-08T12:45:20Z")

</div>

このトピックは2826日後に自動的に閉じられました。返信はもう許可されていません。