如何在网站上使用Icomoon图标，将来更改图标的颜色并添加更多图标?

更新时间：2023-01-25 18:17:34

我正在研究icomoon，很幸运地找到了使用icomoon访问网站的最可靠方法.

I am researching on icomoon and I luckily find out the most reliable way to use icomoon to website.

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

Step 1: Select Icon to add your Website
Step 2: Click on Generate SVG & More

第3步:单击获取代码

第4步: 复制HTML 并粘贴到您要使用的代码中.
第5步: 复制符号定义并粘贴在以下代码之间:

Step 3: Click on Get Code

Step 4: Copy HTML and paste to in your code where you want to use.
Step 5: Copy Symbol Defination and paste between below code:

<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的颜色，大小和更多内容.

Step 6: Copy CSS for styling your Icon and changing the color, size and many more of 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>

上一篇 : ：Swift @autoclosure 在 v1.2 中破坏了枚举案例的兼容性下一篇 : 在Spring MVC框架中使用Spring加载

如何在网站上使用Icomoon图标，将来更改图标的颜色并添加更多图标?

相关阅读

技术问答最新文章