更改颜色字体图标"svg文件“中的问题

Question

我用Adobe 软件设计了一个图标。我用SVG格式保存了它。但是我不能更改填充css和字体图标(由icomoon.io创建)，也不能在html中添加svg文件。

这个设计有什么问题吗？

设计原型https://svgshare.com/i/A8N.svg

Answer 1

首先，您应该创建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>

要更改图标的大小，您应该使用字体大小属性，也可以从CSS中更改颜色。