# Allow the button element to use Font Awesome icons **URL:** \ **Category:** Idea\ **Created:** [November 10, 2017, 4:39pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280 "2017-11-10T16:39:16Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![ethan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ethan/32/104872_2.png) [@ethan](https://forum.bubble.io/u/ethan)\ **Post date:** [November 10, 2017, 4:39pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/1 "2017-11-10T16:39:16Z")
Similar to how the Text element allow the use of `[fa]user[/fa]` BB Code to display [Font Awesome icons](http://fontawesome.io/icons/) by their ID, the Button element should do the same. ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [November 10, 2017, 5:32pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/2 "2017-11-10T17:32:36Z")
I agree. We show font-awesome icons (cog spinning) on “buttons” to let people know we’re loading the next page. Currently, we use text elements that look like buttons for this because of this limitation. The challenge with that is user’s can’t tab to the “button” and click “enter” to submit. So, enabling font awesome icons on Buttons would be useful. ---
**Author:** ![yo11](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/yo11/32/142602_2.png) [@yo11](https://forum.bubble.io/u/yo11)\ **Post date:** [October 22, 2018, 2:28pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/3 "2018-10-22T14:28:21Z")
Hey guys, can this be done yet? ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [October 22, 2018, 2:40pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/4 "2018-10-22T14:40:56Z")
Nope. ---
**Author:** ![ryan16](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ryan16/32/48352_2.png) [@ryan16](https://forum.bubble.io/u/ryan16)\ **Post date:** [October 21, 2019, 9:59pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/5 "2019-10-21T21:59:54Z")
Can anyone think of a workaround? Because clearly nothing I’m doing is working: DESIGN INTENT: ![43%20PM](https://us1.discourse-cdn.com/bubble/original/3X/7/a/7a54b0b9e0baed415495f7611376f5c247846542.png) MY GARBAGE: ![49%20PM](https://us1.discourse-cdn.com/bubble/original/3X/3/7/379dd87e58155317331f2410a99f25905b31da2d.png) ---
**Author:** ![ryan16](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ryan16/32/48352_2.png) [@ryan16](https://forum.bubble.io/u/ryan16)\ **Post date:** [October 21, 2019, 10:45pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/6 "2019-10-21T22:45:49Z")
How do you like these apples? ![29%20PM](https://us1.discourse-cdn.com/bubble/original/3X/e/8/e8113832ccdba2aee661e32f36dba9dd25e3a7ed.png) not perfect but getting there. Is there no way to add blank space in a field that will not get taken out? ---
**Author:** ![ryan16](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ryan16/32/48352_2.png) [@ryan16](https://forum.bubble.io/u/ryan16)\ **Post date:** [October 22, 2019, 2:07am UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/7 "2019-10-22T02:07:35Z")
I got it to work using this combination of insanity. ![43%20PM](https://us1.discourse-cdn.com/bubble/original/3X/c/6/c6e616175f451f07462f53803930fc234d4c2504.png) ![36%20PM](https://us1.discourse-cdn.com/bubble/original/3X/d/2/d254bdfaaa0fab37f02d1747b35bbaab6e0f5afb.png) ![27%20PM](https://us1.discourse-cdn.com/bubble/original/3X/7/9/799b892cfa35d0183976c4286946923a2a617a86.png) ---
**Author:** ![ryan16](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ryan16/32/48352_2.png) [@ryan16](https://forum.bubble.io/u/ryan16)\ **Post date:** [October 22, 2019, 2:36am UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/9 "2019-10-22T02:36:48Z")
The top image shows it in illustrator. I included all the relevant images. I drag the icon (as a picture) onto the button. That seems to be the only way to include an icon on a button ---
**Author:** ![Lucien](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucien/32/58216_2.png) [@Lucien](https://forum.bubble.io/u/Lucien)\ **Post date:** [October 22, 2019, 6:12am UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/10 "2019-10-22T06:12:21Z")
You could use a text element (then no problem with FA) and style it as a button. Visually speaking nobody will be able to tell the difference with a regular button if you copy over every style/condition/transition. This being said, I think you might not be able to use tabulation to navigate to such a custom-made button with your keyboard if it’s a text element instead of an actual button element (to be confirmed). ---
**Author:** ![eli](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eli/32/42610_2.png) [@eli](https://forum.bubble.io/u/eli)\ **Post date:** [October 22, 2019, 12:46pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/11 "2019-10-22T12:46:15Z")
Use a group and with an image and text element in it or use a text element with a fa icon. Any element can be clicked and therefore used as a button. Simply adjust the style properties to resemble the button you want. ---
**Author:** ![lucas.ar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucas.ar/32/63393_2.png) [@lucas.ar](https://forum.bubble.io/u/lucas.ar)\ **Post date:** [June 14, 2020, 7:05pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/12 "2020-06-14T19:05:40Z")
That is no good practice for screen reading usage and general inclusive design > [@eli](#): > > Use a group and with an image and text element in it or use a text element with a fa icon. > > Any element can be clicked and therefore used as a button. Simply adjust the style properties to resemble the button you want. ---
**Author:** ![rymawby](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rymawby/32/70609_2.png) [@rymawby](https://forum.bubble.io/u/rymawby)\ **Post date:** [January 29, 2021, 8:06am UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/13 "2021-01-29T08:06:10Z")
Hiya - I had this issue so I created a plugin to use font awesome icons with a bootstrap button - it might help someone (it’s free) [https://bubble.io/plugin/iconbutton-1608513051989x510350859101536260](https://bubble.io/plugin/iconbutton-1608513051989x510350859101536260) - shout if you spot any issues or want me to add anything to it. ---
**Author:** ![lucas.ar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucas.ar/32/63393_2.png) [@lucas.ar](https://forum.bubble.io/u/lucas.ar)\ **Post date:** [January 29, 2021, 10:17am UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/14 "2021-01-29T10:17:13Z")
any demo page ? ---
**Author:** ![rymawby](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rymawby/32/70609_2.png) [@rymawby](https://forum.bubble.io/u/rymawby)\ **Post date:** [January 31, 2021, 10:34pm UTC](https://forum.bubble.io/t/allow-the-button-element-to-use-font-awesome-icons/20280/15 "2021-01-31T22:34:37Z")
Hi Lucas - here you go: [https://rymawby-plugin-testing.bubbleapps.io/](https://rymawby-plugin-testing.bubbleapps.io/)