CODEWITHSUNDEEP
htmlcssunicode
sleeper
sleeper

Reputation: 3496

How to Resize Unicode Characters via CSS

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?

Upvotes: 14

Views: 38262

Answers (3)

Raptor
Raptor

Reputation: 54212

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

Upvotes: 28

sebilasse
sebilasse

Reputation: 4618

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/

Upvotes: 5

Mikayla Maki
Mikayla Maki

Reputation: 473

Add font-size:12em; to your CSS. Since you're using a unicode character it's technically part of a font; because of this, you can use font-size to change the size of the bullet. Also, as Raptor pointed out, use vertical-align: middle to line up the text as before

Upvotes: 3

Related Questions