Сегодня вечером я работал над некоторой практикой кодирования с помощью CSS. Меня очень раздражало, когда я видел веб-сайт, который использует изображения PNG для отображения своих основных значков, таких как почта, Facebook, ссылки и значки со стрелками.
Я начал гуглить и нашел очень простое решение, для включения которого даже нам не нужна таблица стилей значков. Я удивлен и почувствовал, что сегодня у меня есть какая-то сверхспособность.
Следуйте за мной, чтобы узнать простой СОВЕТ (я имею в виду сверхспособность)
шаг 1
Откройте https://icons.getbootstrap.com/
Вы можете найти свой любимый значок в средней части веб-сайта.
Нажмите на нужный значок.
В моем случае я открыл значок envolp.
Шаг 2
Та же ссылка: https://icons.getbootstrap.com/icons/envelope/
Однажды вы открыли свою любимую иконку. Вы направляетесь копировать html и кодовую точку.
Скопируйте фрагмент кода в формате svg.
И это все,
Вы можете изменить стиль в своем коде, т.е. высоту, ширину и цвет в соответствии с вашими требованиями.
В моем случае я объявил ширину и высоту 50 пикселей, а цвет — #DDD (серый), измените ширину в атрибуте ширины и атрибуте, чтобы изменить его на высоту. Чтобы изменить цвет, объявите свой шестнадцатеричный цвет в атрибуте заливки.
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="#DDD" class="bi bi-envelope" viewBox="0 0 16 16"> <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/> </svg>
Спасибо за чтение, увидимся в следующем блоге.
