top of page
Forest Background

Blog Post

How To Use Font Awesome Inside of Inputs

Updated: May 11, 2022

Utilize the CSS Font-Family Property

This post will help you learn how to utilize the CSS font-family property. This property can hold several font names as a fallback system if the first font is either not found, or the browser does not support it. For example, Font-family: font | fallback […] | generic-family. Now, let’s take a look at a simple input: input type=”submit” name=”addToCart” value=”Add to Cart”

With proper styling we could get the button to look as follows:

add to cart button

This button looks nice and it gets the job done, but let’s say you want to add an additional graphic, such as a cart logo, before the text. Rather than creating this button in PhotoShop, or any other photo editor, you could use CSS to append the font-awesome icon. You first need to locate the font awesome cheat sheet and copy the icon directly off the page using [CTRL + C].

If the font-family is installed properly, your button will look like this:

cart button

In order to make your button look like the above Add to Cart Button, you will need to append the character to the front of your string in the value tag of your HTML. By adding this line of CSS in your style sheets, you will achieve the final look of this button. Font-family: Tahoma, FontAwesome, [main font], [secondary font], serif;

Interested in starting a new project, or have questions for the Border7 Team? Contact Us. We’d love to hear from you!

#border7developertips #CSShelp #fontawesome #ecommercetips #cssfontfamilyproperty

Launching a New Site?
Want Instant Access to Our Free Website Launch Checklist? Click the button below!
Wix Website Launch Checklist
Need More Traffic?
Struggling to Drive Traffic to Your Website? Get Access to Our Free Traffic Planner Guide!
Border7 Traffic Planner Guide
bottom of page