gpt4 book ai didi

html - 如何在网站上使用 Icomoon 图标,更改图标颜色以及将来添加更多图标?

转载 作者:行者123 更新时间:2023-11-28 14:15:18 25 4
gpt4 key购买 nike

我在我的网站元素上使用Icomoon。我无法在我的网站上添加 Icomooon 图标。因此,如果有任何简单的方法可以在网站上使用 Icomoon 图标,添加后它将被删除,我们可以向网站添加更多图标。

最佳答案

我正在研究 icomoon,幸运的是我找到了使用 icomoon 到网站的最可靠方法。

第 1 步:选择图标以添加您的网站
第 2 步:点击Generate SVG & More

Step 1 & step 2 Image
第 3 步:点击获取代码
Step 3 Image
第 4 步:复制 HTML 并粘贴到您要使用的代码中。
第 5 步:复制符号定义并粘贴到以下代码之间:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
//Paste Symbol Defination code Here
</defs>
</svg>

第 6 步:复制 CSS 以设置图标样式并更改 Icomoon 的颜色、大小等。

.icon {
display: inline-block;
width: 40px;
height:40px;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
color:red;
}

.iconBook {
display: inline-block;
width: 40px;
height:40px;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
color:Green;
}
<html>
<head>
<title>IcoMoon Example</title>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!–– At Her You can add Icon Defination ––>
<symbol id="icon-books" viewBox="0 0 18 16">
<title>books</title>
<path d="M3.5 2h-3c-0.275 0-0.5 0.225-0.5 0.5v11c0 0.275 0.225 0.5 0.5 0.5h3c0.275 0 0.5-0.225 0.5-0.5v-11c0-0.275-0.225-0.5-0.5-0.5zM3 5h-2v-1h2v1z"></path>
<path d="M8.5 2h-3c-0.275 0-0.5 0.225-0.5 0.5v11c0 0.275 0.225 0.5 0.5 0.5h3c0.275 0 0.5-0.225 0.5-0.5v-11c0-0.275-0.225-0.5-0.5-0.5zM8 5h-2v-1h2v1z"></path>
<path d="M11.954 2.773l-2.679 1.35c-0.246 0.124-0.345 0.426-0.222 0.671l4.5 8.93c0.124 0.246 0.426 0.345 0.671 0.222l2.679-1.35c0.246-0.124 0.345-0.426 0.222-0.671l-4.5-8.93c-0.124-0.246-0.426-0.345-0.671-0.222z"></path>
</symbol>

<symbol id="icon-davidstar" viewBox="0 0 32 32">
<title>davidstar</title>
<path d="M16 6.96l1.873 3.040h-3.745l1.872-3.040zM24.799 21.264h-3.725l1.853-3.018 1.872 3.018zM7.202 21.264l1.872-3.018 1.853 3.018h-3.725zM11.994 23l4.006 6.5 4.007-6.5h7.993l-4.006-6.49 4.006-6.51h-7.993l-4.007-6.5-4.006 6.5h-7.994l4.007 6.51-4.007 6.49h7.994zM24.799 11.736l-1.872 3.035-1.853-3.035h3.725zM16 26.039l-1.872-3.039h3.745l-1.873 3.039zM10.141 16.51l2.92-4.774h5.879l2.921 4.774-2.939 4.754h-5.86l-2.921-4.754zM7.202 11.736h3.725l-1.853 3.035-1.872-3.035z"></path>
</symbol>
</defs>
</svg>



<b>1. Book:
<svg class="iconBook icon-books"><use xlink:href="#icon-books"></use></svg>
</b>

<br />

<b>2. Star:
<svg class="icon icon-davidstar"><use xlink:href="#icon-davidstar"></use></svg>
<b>
<br/><br>
<b>You can use more icon in future. easily by adding Html, Icon defination and CSS</b>
</body>
</html>

关于html - 如何在网站上使用 Icomoon 图标,更改图标颜色以及将来添加更多图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55998838/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com