Adding Icons in forms

SOLVE
Drew
Member

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

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

https://formden.com/blog/addon-icon

 

Will this be possible while using Hubspot. 

 

Thank you

 

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
ndwilliams3
Solution
Key Advisor

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.

@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

View solution in original post

2 Replies 2
ndwilliams3
Solution
Key Advisor

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.

@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

View solution in original post

Ty
HubSpot Employee
HubSpot Employee

Awesome solution @ndwilliams3

0 Upvotes