我已經從 ionicon 下載了一些 .svg 檔案，但我無法使用類名使用它們。
<my-icon>heart</my-icon>
<my-icon class="heart"></my-icon>
uj5u.com熱心網友回復：
有兩種實作圖示的方法。
首先匯入 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>附注。堆疊溢位片段不起作用，單擊下面的 codepen 鏈接查看更改
代碼筆在這里
類名的 Ionicons 參考：https ://ionic.io/ionicons/v2
或者，如果您仍想使用自定義下載的圖示，您可以嘗試將其設定在偽元素中，并可以使用過濾器屬性更改其顏色。
.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>uj5u.com熱心網友回復：
首先，你要在html中放不正規的標簽，比如：<my-tag>這個可以運行，但是在有些電腦上就不行了。我將會展示出來：
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>但正因為如此，您可以使用類來檢測圖示。
然后您可以使用一些選項，例如：
- 背景圖片：網址（“你的網址圖示.svg”）；
- 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>uj5u.com熱心網友回復：
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>
您可以為后臺類撰寫自己的屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312440.html
標籤：javascript html css svg 前端