How to Insert Wingdings in CSS

Cascading Style Sheets (CSS) is a useful way to format Web pages. You can style all aspects of a website's design on an external style sheet, and the changes you make to that style sheet can affect multiple Web pages. Fonts can easily be reconfigured through CSS. There is a list of fonts that are standardized for use on the Internet. Wingdings is not among these fonts, and it is a font that is not available by default on all computers. Fortunately, you can still use CSS to configure a Web page to use Wingdings.

Video of the Day


Open your CSS file in Notepad.


Create a new class or ID for the object that will be formatted in Wingdings. Use a class if you will call this parameter more than once. Use an ID if you will only call it once. For example, to create a class called "crazy," type the following:

.crazy {


Specify Wingdings within the "font-family" property of your class or ID. For example, for the class "crazy":

.crazy { font-family: wingdings}


Locate the item you wish to render in Wingdings within your HTML file. Specify that item as an instance of the class or ID to which Wingdings is applied. For example, if the desired element is a "div":

The text within this "div" will be formatted in Wingdings.

Show Comments