html - 更改颜色字体图标中的问题 "svg file"

Question

我用 Adobe Illustrator 软件设计了一个图标。我将其保存为 SVG 格式。但我无法更改填充 css 以及字体图标(由 icomoon.io 创建)以及在 html 中添加 svg 文件。

设计有问题吗？

设计原型(prototype) 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>

要更改图标的大小，您应该使用 font-size 属性，您也可以通过 CSS 更改颜色。