How to Resize Unicode Characters via CSS

Question

I have the following ul, which produces a square bullet that (without modification) is very slightly larger than the default square bullets in HTML.

li:before {
  content: "\25a0";
  margin-right: 6px;
  color: blue;          
}

Problems:

1. I want to significantly increase the size of the square unicode-generated bullet.
2. Also, the bullet is aligned to the bottom of the text instead of center aligned to the text.

Any clues on how to fix this?

Answer 1

Please note that at least your fiddle behaves totally different across browsers !

You did not specify a font-family for the Unicode part. In the fiddle many Unicode characters will appear larger in Firefox, IE and Edge. Probably in all non-webkit browsers.

Add e.g.

font-family: "Lucida Sans Unicode", "Arial Unicode MS";

everywhere you want to use Unicode characters crossbrowser ...

You can read more about the differences in detail here: https://www.smashingmagazine.com/2014/05/unicode-for-a-multi-device-world/

Answer 2

You need to add the below CSS properties to li:before

font-size: 128px;
vertical-align: middle;

You can change the 128px to any size you want.

Demo