Question

我通过 Adobe Illustrator 软件设计了一个图标。我将其保存为 SVG 格式。但是我无法更改css的填充以及字体图标（由icomoon.io创建）和html中的添加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更改颜色。

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

1 个答案: