Проблема в изменении цвета значка шрифта "svg file" - PullRequest
Новая
       49

Проблема в изменении цвета значка шрифта "svg file"

0 голосов
/ 26 декабря 2018

Я создал иконку с помощью Adobe Illustrator программного обеспечения.Я сохранил это в формате SVG .Но я не могу изменить заливку с помощью css, а также в значке шрифта (создать icomoon.io ), а также в добавлении файла SVG в HTML.

Есть ли проблемы с дизайном?

Разработан прототип https://svgshare.com/i/A8N.svg

1 Ответ

0 голосов
/ 26 декабря 2018

Прежде всего вы должны создать Css файл: 

    @font-face {
     font-family: 'icomoon';
     src:  url('https://i.icomoon.io/public/temp/0d5322f2ab/UntitledProject/icomoon.eot?j58a20');
     src:  url('https://i.icomoon.io/public/temp/0d5322f2ab/UntitledProject/icomoon.eot?j58a20#iefix') format('embedded-opentype'),
           url('https://i.icomoon.io/public/temp/0d5322f2ab/UntitledProject/icomoon.ttf?j58a20') format('truetype'),
           url('https://i.icomoon.io/public/temp/0d5322f2ab/UntitledProject/icomoon.woff?j58a20') format('woff'),
           url('https://i.icomoon.io/public/temp/0d5322f2ab/UntitledProject/icomoon.svg?j58a20#icomoon') format('svg');
     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: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;

     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

.icon-A8N:before {
    content: "\e900";
    color: #b90f00;
}

Тогда ваш HTML будет выглядеть так: 

<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
<span class="icon-A8N" style="font-size: 150px;"></span>

Чтобы изменить размер вашей иконки, вы должны использовать font-size свойство, а также вы можете изменить цвет с CSS.

...