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

问题描述：

我正在网站和项目上使用 Icomoon .而且，我无法在我的网站上添加一个Icomooon图标. 因此，如果有任何简单的方法可以在网站上使用Icomoon图标，则在添加后将其删除，我们可以在网站上添加更多图标.

I am using Icomoon on my Website and Project. And I am troubled to add an Icomooon icon to my website. So if any easy way to use an Icomoon icon to the website, after add it will removed of we can add more icon to the website.

答

我正在研究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>

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

相关推荐