# Adding Icons in forms

**URL:** <https://community.hubspot.com/t/adding-icons-in-forms/859>\
**Category:** CMS Development\
**Created:** [January 27, 2017, 5:33am UTC](https://community.hubspot.com/t/adding-icons-in-forms/859 "2017-01-27T05:33:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Drew](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/drew/32/93181_2.png) [@Drew](https://community.hubspot.com/u/Drew)\
**Post date:** [January 27, 2017, 5:33am UTC](https://community.hubspot.com/t/adding-icons-in-forms/859/1 "2017-01-27T05:33:46Z")

</div>

Hey is it possible to add glyphicons in forms while using Hubspot?

I want to create form in a landing page like this.

> **[How to Add Icons to Your Bootstrap Form | Formden.com](https://formden.com/blog/addon-icon)**
>
> Learn how to add icons and text your form fields as prepended/appended addons.

Will this be possible while using Hubspot.

Thank you

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [January 27, 2017, 3:26pm UTC](https://community.hubspot.com/t/adding-icons-in-forms/859/2 "2017-01-27T15:26:32Z")

</div>

Yes, you could do it with CSS and the fontawesome icon library. You would need to create a style for each type of form element you want an icon on. Here’s an example.

```auto
@import "//fonts.googleapis.com/css?family=Montserrat:400,700";
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

.hs_firstname .input:before {
 background-color: #fff;
 border: 1px solid #ccc; border-right: 0;
 border-radius: 0;
 color: #767676;
 display: block;
 float: left;
 font-family: FontAwesome;
 font-size: 15px;
 font-style: normal;
 font-weight: 200;
 letter-spacing: 0.5px;
 line-height: 18px;
 margin: 0 0 20px;
 padding: 10px;
 width: 18px;
 content: "";
}

```

 ![Screen Shot 2017-01-27 at 9.24.56 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/1/d1c2032b286dcfce7d11eabd2bd186dd2e8d7a84.png)

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [January 27, 2017, 8:21pm UTC](https://community.hubspot.com/t/adding-icons-in-forms/859/3 "2017-01-27T20:21:32Z")

</div>

Awesome solution @ndwilliams3!