Как изменить размер символов Unicode с помощью CSS

у меня есть следующие ul, который производит квадратную пулю, которая (без изменений) является очень немного больше, чем квадратные маркеры по умолчанию в HTML.

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

проблемы:

  1. Я хочу значительно увеличить размер площади Юникод автоматически пуля.
  2. кроме того, пуля выравнивается по нижней части текста вместо центр выровнены текст.

любые подсказки о том, как это исправить?

спасибо заранее

7
css css3 html5 unicode

3 ответов

вам нужно добавить следующие свойства CSS в li:before

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

вы можете изменить 128px к любому размеру вы хотите.

демо

11

обратите внимание, что, по крайней мере, ваша скрипка ведет себя совершенно по-разному в браузерах !

вы не указали семейство шрифтов для части Unicode. В скрипке многие символы Юникода будут отображаться больше в Firefox, IE и Edge. Вероятно, во всех браузерах, отличных от webkit.

добавить например 

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

везде, где вы хотите использовать символы Юникода crossbrowser ...

вы можете прочитать больше о различиях в деталях здесь: https://www.smashingmagazine.com/2014/05/unicode-for-a-multi-device-world/

3

добавить font-size:12em; для вашего CSS. Поскольку вы используете символ Юникода это технически часть шрифта; из-за этого, вы можете использовать font-size чтобы изменить размер пули. Кроме того, как указал Раптор, используйте vertical-align: middle выровнять текст перед

2