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

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

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

第 3 步：单击获取代码第 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  ––&gt;
<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图标，更改图标颜色以及将来添加更多图标？

问题描述

解决方案

推荐阅读