Как изменить размер спецсимволы html

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?

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/

answered Mar 9, 2016 at 10:18

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

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?

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/

answered Mar 9, 2016 at 10:18

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

How do I set a symbols width and height?

<span>&gt;</span>

that > is not wide enough:

span {
    font-family:arial;
    font-size:20px;
}

Is it possible to set it with code like width: 10px; height: 20px; ?

answered Jun 26, 2013 at 8:46

It’s not possible set the width of a character, but…

A little sloppy solution: why you not try with other font? You can find several wide fonts in Google Fonts (under «wide» filter), and make something like this:

span.wide {
    font-family:"wide font";
    font-size:20px;
}

Pros: Cross-browser, minimal code, no images.
Cons: Using many fonts can slow down your webpage.

answered Jun 26, 2013 at 9:10

answered Nov 9, 2022 at 17:07