Есть ли способ сделать все значки одинакового размера?

интересно, есть ли способ сделать все значки реагирующих значков одинакового размера? Особенно, если вы используете разные шрифты значков.

В моем случае, например, я должен использовать два разных шрифта, потому что один шрифт не обеспечивает необходимую иконку, но это выглядит так:

Как видите, значок информации и значок выхода выглядят хорошо, но значок настроек не очень.

Эти значки на скриншоте используют IconContext.Provider, который выглядит так:

<IconContext.Provider value = {{className: "mr-2", size: "1rem"}}>
                <div>
                    <props.icon/>
                </div>
</IconContext.Provider>

Теперь я ожидал, что все иконки будут иметь размер 16x16 пикселей. Но, как видите, не очень подходит.

Было бы здорово, если бы вы могли дать мне решение здесь или знать какие-либо утилиты, которые могут решить проблему.

Заранее спасибо!

css icon-fonts react-icons

09.04.2023 20:08

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

TL;DR: избегайте смешивания слишком большого количества разных наборов иконок.

Не существует стандарта для размеров значков или показателей. Это относится к библиотекам svg и шрифтам значков.

Большинство библиотек значков предназначены для обеспечения одинакового визуального размера и веса для всех значков.
Точно так же, как обычные шрифты — некоторые имеют более высокую высоту заглавных букв и жирнее, чем другие.

Лучшее, что вы можете сделать, это уменьшить количество разных наборов значков и запомнить происхождение разных значков.

Таким образом, вы можете определить правила настройки для нормализации визуальных размеров.

Пример шрифта иконки

@charset "UTF-8";
@font-face {
  font-family: "icomoon";
  src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAALwAA0AAAAABvAAAAKZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCbhEICoJYghsLEgABNgIkAyAEIAWDGwdZG7gFyJ6DTZmLN0YIkoUnw0guc4+PcPHwtL+nc2fmYSVEJqvBoYmJ6kLdlDa5ivlbtZY9z+iCuP8BJvmAYb7YfxsiR8bky0elIiOZVMpwMv7n/2bcEgzLxjTJLIs/BhqthQGmPQ/DdUvHWigBHusJ3+6cRYtj8XBoh0PyyyPK5zQTAt48iJcAn3Z8//G5A90xECQhNEJBQs4vcQ1C0n3eOa5Cfnw1L6RgOdFb6RL0a0AOdUKWZJSAAOpohFw/HIGD+EK2RWA16KmV1MLoz/icfg3o/APwDTrXg4Tmov6UhZ4AIGSihsgAkUCCv0xQwCdCdKhBC3qDBrvBUQAFEAijpqxIuXZgPBlcsizzeWQp3mG+m98VW/dCnpQkR48sn+edPu4qIxm6XjgN/spG+Dwra3oWrK52lQXWB3rdpAzU+yte3xjkOwpO6KIzG93kwTXYcnutPwDA082X3dzJqdCH677EC6Wx8+xsNHdo2Z3RXGlpiAsN4GDdwOnUXeq37169RXbfICzruVzlIEtxiZEd/CRo0wbrAnWRTsZ3aROrwiq3u8IywgLjw5JnkkHX9ofjvsqwKgACwYz3L2zqBf8lcgHmZTQUeSeglUAw4sUKKOifQlsAxBYAoLC1IL+GSqC1EA8kAAD09AqB0OiNQNKYjEDWWIJA0diOQKWbwwjUGrcQ6GqoC1kUKUJPMpSwwVDGZkMFW05UBrITtZ7OD9nVfLt6uQwbNGzYEBxa+5MMDwEbefhMGuAwBu/TkqA2Zkm4lceYcb3OCBZpGJxc6SxprA1gKWmdEMHHY6gLy2GCh5veaVaEOsSaQBrclgP7OKhzDf/sMAOQ+FVbIiEFHzkEJCSRyDcwO+K3iCeHehljCa/KYwy2atXMkgUAAAA = ") format("woff2");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class* = " icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon-home1:before {
  content: "";
}

.icon-home:before {
  content: "";
}

.icon-home3:before {
  content: "";
}

body {
  font-size: 5em;
}

p {
  margin: 0;
}

span {
  border: 1px solid #ccc;
  display: inline-block;
}

.adjust span {
  border: none;
  width: 1em;
  vertical-align: -0.08em;
}
.adjust .fontawsome {
  transform: scale(0.95);
}
.adjust .material {
  transform: scale(1);
}
.adjust .icomoon {
  transform: scale(0.85);
}

<p><span class = "fontawsome icon-home"></span>
<span class = "material icon-home1"></span>
<span class = "icomoon icon-home3"></span>
</p>

<p class = "adjust">
  <span class = "fontawsome icon-home"></span> Home
</p>
<p class = "adjust">
<span class = "material icon-home1"></span> Home
</p>
<p class = "adjust">
<span class = "icomoon icon-home3"></span> Home
</p>

SVG-иконки

У некоторых иконок может быть очень узкий viewBox, у других могут быть некоторые отступы для моноширинного размера ... а у других может не быть ViewBox — обычно не лучшая идея для использования адаптивных иконок.

Вы также можете использовать веб-приложение, такое как icomoon.io, чтобы настроить размеры перед созданием набора шрифтов/svg.

Поэтому обычно лучше выбрать набор/библиотеку значков, которая идеально покрывает все необходимые значки.

Дополнительные значки (из разных библиотек) должны иметь отдаленно похожие метрики и стили (например, закругленные углы, такие как «FontAwesome», и острые углы у «Material icons»).

Спасибо за подробное объяснение! Тогда я буду придерживаться одного иконочного шрифта

— 16.04.2023 23:23

10.04.2023 19:59