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

【问题标题】：The Problem in Change Color Font Icon "svg file"更改颜色字体图标“svg 文件”中的问题
【发布时间】：2018-12-26 07:26:13
【问题描述】：

我用 Adobe Illustrator 软件设计了一个图标。我将其保存为 SVG 格式。但是我不能用css和字体图标（由icomoon.io创建）以及在html中添加svg文件来改变填充。

设计有问题吗？

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

【问题讨论】：

标签： html css icons glyphicons

【解决方案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 更改颜色。

【讨论】：