Шрифтовые иконки Font Awesome просто великолепны, что предоставляют огромное количество готовых к использованию и масштабируемых фигур, которые можно легко использовать на веб-странице. Однако наличие такого большого количества форм имеет недостаток в размере, а следовательно в скорости сайта. Хотя есть такие инструменты, как приложение icomoon, которые могут создавать пользовательские наборы из этих значков шрифтов. И здесь можно использовать встроенный SVG-подход, поскольку в долгосрочной перспективе этот формат более гибкий.
Встроенный SVG цвет
Когда вы используете встроенный SVG вместо значка шрифта, вам может потребоваться изменить цвет этих фигур, чтобы они соответствовали тексту. Чтобы иметь возможность изменять цвета с помощью CSS, мы будем использовать фигуры, определенные только путем. Получив это, мы можем просто использовать CSS-свойство «fill», чтобы изменить их цвет, как показано в коде ниже.
CSS
Вы можете найти полную демонстрацию в следующей кодовой вставке, где конки SVG созданы из иконок Font Awesome.
HTML
Код
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 448 448">
<path d="M0 376v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 280v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 184v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 88v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM96 376v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 280v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 184v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 88v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625z"></path>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="65" viewBox="0 0 448 448">
<path d="M0 216.25q0-88.25 31-88.25 1.5 0 10.875 5.25t24.375 10.625 29.75 5.375q16.75 0 33.25-5.75-1.25 9.25-1.25 16.5 0 34.75 20.25 64-40.5 1.25-66.25 32h-33.5q-20.5 0-34.5-10.125t-14-29.625zM32 64q0-26.5 18.75-45.25t45.25-18.75 45.25 18.75 18.75 45.25-18.75 45.25-45.25 18.75-45.25-18.75-18.75-45.25zM64 383.25q0-13.25 0.875-25.875t3.5-27.25 6.625-27.125 10.75-24.375 15.5-20.25 21.375-13.375 27.875-5q2.5 0 10.75 5.375t18.25 12 26.75 12 33.75 5.375 33.75-5.375 26.75-12 18.25-12 10.75-5.375q15.25 0 27.875 5t21.375 13.375 15.5 20.25 10.75 24.375 6.625 27.125 3.5 27.25 0.875 25.875q0 30-18.25 47.375t-48.5 17.375h-218.5q-30.25 0-48.5-17.375t-18.25-47.375zM144 160q0-39.75 28.125-67.875t67.875-28.125 67.875 28.125 28.125 67.875-28.125 67.875-67.875 28.125-67.875-28.125-28.125-67.875zM320 64q0-26.5 18.75-45.25t45.25-18.75 45.25 18.75 18.75 45.25-18.75 45.25-45.25 18.75-45.25-18.75-18.75-45.25zM331.75 224q20.25-29.25 20.25-64 0-7.25-1.25-16.5 16.5 5.75 33.25 5.75 14.75 0 29.75-5.375t24.375-10.625 10.875-5.25q31 0 31 88.25 0 19.5-14 29.625t-34.5 10.125h-33.5q-25.75-30.75-66.25-32z"></path>
</svg>
CSS
Код
p {
text-transform: uppercase;
color: #ecf0f1;
font-weight: normal;
}
svg {
display: block;
margin: 0 auto 18px;
fill: #0aa94d;
}
Прежде чем закончить этот пост, я хотел бы указать на следующие две статьи, которые помогут вам выбрать между встроенными SVG и Icon-шрифтами для ваших собственных проектов.
Демонстрация
