0
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2020 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="mobile" unicode="&#xe800;" d="M480 840q42 0 71-29t29-71l0-780q0-40-29-70t-71-30l-380 0q-40 0-70 30t-30 70l0 780q0 42 30 71t70 29l380 0z m-190-940q30 0 50 15t20 35q0 22-20 36t-50 14q-28 0-49-15t-21-35 21-35 49-15z m210 150l0 660-420 0 0-660 420 0z" horiz-adv-x="580" />

<glyph glyph-name="heart-empty" unicode="&#xe801;" d="M929 517q0 46-12 80t-31 55-46 33-52 18-55 4-62-14-62-36-48-40-34-34q-10-13-27-13t-27 13q-14 15-34 34t-48 40-62 36-62 14-55-4-52-18-46-33-31-55-12-80q0-93 105-198l324-312 324 312q105 105 105 198z m71 0q0-123-128-251l-347-335q-10-10-25-10t-25 10l-348 336q-5 5-15 15t-31 37-38 54-30 67-13 77q0 123 71 192t196 70q34 0 70-12t67-33 54-38 42-38q20 20 42 38t54 38 67 33 70 12q125 0 196-70t71-192z" horiz-adv-x="1000" />

<glyph glyph-name="fire" unicode="&#xe802;" d="M7 238q10 41 50 131t44 146q39-72 45-145 148 184 154 428 10-6 25-17t58-45 74-74 61-96 34-118q15 36 19 79t-9 80q15-12 41-39t56-75 56-99 31-118-9-127-72-127-152-120q64 129 25 278t-154 229q10-43-11-141t-65-150q7 63 4 102t-12 59l-10 17q-12-70-60-140-26-38-39-69t-9-80 30-105q-135 76-181 154t-24 182z" horiz-adv-x="748" />

<glyph glyph-name="evernote" unicode="&#xf333;" d="M750 636q0-4 5-73t9-144-1-171-19-171-51-126-91-51q-154 0-194 26-26 20-18 130 2 40 37 59t69 19l34-2-4-70q-12-2-38-2-20 0-24-26-4-38 40-42l86 4q38 4 28 136-2 16-18 26t-34 13-49 8-47 9q-28 8-46 28t-27 37-11 17-8-58-30-58q-44 0-139 15t-115 35q-34 34-62 149t-28 151q0 34 58 30l116 0q78 0 78 72 0 12-1 52t-1 60q0 82 40 82 90 0 120-14 18-8 29-26t13-34l4-14 202-12q10 0 25-3t39-19 24-42z m-96-302q6 6-2 32t-29 52-49 26-45-23-21-46 0-29q8-6 15-5t26 5 31 4q14 0 31-6t28-10 15 0z m-482 308q0-22-28-22l-144 0 176 172q-4-138-4-150z" horiz-adv-x="766" />
</font>
</defs>
</svg>
6
  • А зачем? Это же шрифт в формате svg. Подавляющее большинство современных браузеров вполне переваривает woff-формат. svg-формат для шрифта использовался только в старых Safari
    – zhurof
    30 июл 2020 в 5:25
  • @zhurof дело в fill у svg он есть а как другим форматам задать background не знаю
    – Armen
    30 июл 2020 в 5:57
  • @zhurof спасибо за ответ но в примере нету path и id там общее и есть только несколько glyph которые собственно отвечают за разные иконки я так и не понял как именно к ним обратится?
    – Armen
    30 июл 2020 в 7:19
  • @zhurof по поводу первого ответ с css у меня так и подключено НО как в i передать именно svg ?
    – Armen
    30 июл 2020 в 7:20
  • 1) И в теге glyph и в теге path есть атрибут d, который как раз и отвечает за контуры фигуры 2) Как "передать svg" в тег i: иконочный шрифт у вас сделан в онлайн генераторе fontello (fontello.com) . обычно такие генераторы выдают сразу и файл css и другие форматы шрифтов для подключения. Если нет - загрузите в этот редактор свой svg-файл и сделайте на его основе шрифт. Генератор вам выдаст всё необходимое для подключения.
    – zhurof
    30 июл 2020 в 8:17

1 ответ 1

2

Есть несколько способов вставить svg на сайт так, чтобы можно было менять цвет иконки. У вас, судя по всему, уже сгенерирован иконочный шрифт. Обычно там в наличии ещё и другие форматы помимо svg: woff, ttf, woff2. Цвет тконок можно будет менять также, как цвет текста. Подключается такое в css при помощи правила @font-face. Пример

@font-face {
  font-family: 'FontAwesome';
  src: url('https://fontawesome.com/v4.7.0/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
        url('https://fontawesome.com/v4.7.0/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
        url('https://fontawesome.com/v4.7.0/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
        url('https://fontawesome.com/v4.7.0/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
<i class="fa fa-music" style="color:red"></i>
<i class="fa fa-music" style="color:green"></i>

Можно вставлять svg прямо в разметку, тогда управлять цветом заливки можно будет при помощи свойства fill.

path{
  fill: red;
  transition: all .3s ease;
}
path:hover{
  fill: yellow;
}
<svg width="64.321" height="82.113" viewBox="0 0 64.321 82.113" xmlns="http://www.w3.org/2000/svg">
    <path d="m64.321 49.955-7.62-7.6213-19.167 19.167v-61.5h-10.747v61.5l-19.167-19.167-7.6213 7.6213 28.351 28.349 3.8107 3.8093 3.8107-3.8093z"/>
</svg>

Также можно использовать тег <use /> для многократного использования какой-либо иконки без написания лишней разметки

svg{
  display:block;
  width:100%;
  height:100vh;
}
.red-icon{
  fill:red;
}
.blue-icon{
  fill:blue;
}
<svg  xmlns="http://www.w3.org/2000/svg">
  <symbol id="arrow" width="64.321" height="82.113" viewBox="0 0 64.321 82.113">
    <path d="m64.321 49.955-7.62-7.6213-19.167 19.167v-61.5h-10.747v61.5l-19.167-19.167-7.6213 7.6213 28.351 28.349 3.8107 3.8093 3.8107-3.8093z"/>
  </symbol>
    
  <use href="#arrow" class="red-icon"/>
  <use href="#arrow" x="90" class="blue-icon" />
</svg>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.