[Jennifer]

I am wondering if it is possible to use a wingding instead of the solid disc for my bullet.

[Pratik]

Hi @jennifer,

Can you post in your site url and the place you want wingding so that I can check it and provide you with Custom CSS code?

Also, please let me know which bullet image you exactly want.

Regards,
Pratik

[Jennifer]

My website is firstuccsheffield.org
I would like to replace the bullets on the Home page in the Holy Happenings widget on the right.
I would like to use the cross in wingdings2 0x85

Thank you.

[Pratik]

Hi @Jennifer,

You can use following CSS code in <b>Appearance-> Customize-> Theme Options -> Custom CSS</b> box:

ul li {
    list-style-type: "✝";
}

Note: Specifying Wingdings 2 font is contrary to the published specifications, has never been a documented feature of HTML, is not reliable, and should not be done. Wingdings 2 is not available on all computers, and so the intended characters may not appear on computers running non-Microsoft operating systems such as Mac OS 9, Mac OS X 10 or Linux. The intended characters are also unlikely to appear when using a standards-compliant browser such as Firefox, Google Chrome, Netscape 6+, Opera 6+, Safari 3+ or SeaMonkey (formerly Mozilla). The same problems are found with the Webdings, Wingdings and Wingdings 3 fonts – they should not be used in Web pages.

Regards,
Pratik

[Jennifer]

Thank you Pratik for this helpful information that I was not aware of.
What font is currently specified for the bullet? Perhaps I may choose another symbol from that set.

[Pratik]

Hi @Jennifer,

I did some research for you and that icon can be achieved using HTML entities. So use following code instead.

.widget ul {
  list-style: none;
}

.widget li {
  text-indent: -15px;
}

.widget li:before {
  content: "\271D";
  padding-right: 5px;
}

This should work and overcome the obstacle on Wingdings not being web ready as it uses HTML entity instead of the symbol.

Let me know how it goes.

Regards,
Pratik

[Author]

Posts