使用类名使用svg文件

我已经从ionicon下载了一些。svg文件，但我无法使用它们使用类名。

<my-icon>heart</my-icon>
<my-icon class="heart"></my-icon>

有两种实现图标的方法。

先导入css &为图标使用正确的类名，您可以稍后根据需要设置颜色。
导入css并为自定义类名编写自定义css

.heart::before {
content: "f388";
display: inline-block;
font-family: "Ionicons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
color: green;
}
.heart-icon {
color: red;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<span class="heart-icon ion-android-favorite"></span>
<br><br>
<span class="heart"></span>

p。堆栈溢出代码段不能工作，点击下面的codependency链接查看更改

Codepen这里

Ionicons参考类名称:https://ionic.io/ionicons/v2

或者如果你仍然想使用自定义下载的图标，你可以尝试在psuedo元素中设置它，并可以使用filter属性改变它的颜色。

.custom_icon::before {
content: url('https://svgsilh.com/svg/614515.svg');
max-height: 17px;
max-width: 13px;
transform: scale(0.009);
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
position: absolute;
transform-origin: left top;
}

<span class="custom_icon"></span>

首先，要在html中放置非规则标记，例如:<标记在这可以运行，但在一些计算机将不工作。我将展示:>

my-icon::before {
content: "f004";
}
my-icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/>
<my-icon></my-icon>

但正因为如此，你可以使用类来检测图标。

那么你可以使用一些选项，比如:

背景图片:url("your-url-icon.svg";
，你可以使用框架，比如font-awesome!

.framework-icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.framework-icon::before {
content: "f004";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/>
<div>
svg tag: <br><svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="black" />
</svg>
</div>
<div>
frameworks like font-awesome: <div class="framework-icon"></div>
</div>

1。您可能需要将。svg转换为。ttf或。woff格式，以便像类名一样使用。我发现这个网站可以接受svg文件，并给出。ttf或。woff文件作为输出。

注意:您可以通过这种方式轻松地调整svg的样式。

https://glyphter.com/

Example: ```<div class='fa fa-icon'></div>```

2。你可以创建一个类，将svg作为html <tag>的背景

<style>
.svg{
background:url("image/path" )         
}
</style>
<body>
<div class="svg"></div>
</body>

你可以为背景类写你自己的属性

相关内容

最新更新

热门标签：