How to Insert Wingdings in CSS

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.

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.


Step 1

Open your CSS file in Notepad.

Video of the Day

Step 2

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 {

Step 3

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

.crazy { font-family: wingdings}



Step 4

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.




Report an Issue

screenshot of the current page

Screenshot loading...