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:
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:
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!
