Question

我在我的项目中使用了Ionicons v1 ...我正在添加一项新功能，该功能需要Ionicons中不存在的大量图标。我以前从没涉足字体图标，所以我真的不知道我在做什么。但是，我做了一些研究并尝试了以下操作：

使用下面的方法，我尝试自己做，但是没有用。

我使用免费服务https://www.pngtosvg.com/将png转换为svg，然后将该svg导入到其他免费服务https://icomoon.io中，并从新的源svg文件中检索了此内容：

HTML
<svg class="icon icon-valet"><use xlink:href="#icon-valet"></use></svg>

Symbol:
<symbol id="icon-valet" viewBox="0 0 32 32">
<title>valet</title>
<path d="M20.571 5.27c-1.142 0.183-2.337 1.133-2.707 2.154l-0.152 0.42h-8.292l-1.34 1.357 0.399 0.614c0.497 0.764 1.473 0.903 2.048 0.291 0.272-0.29 0.405-0.323 1.292-0.323s1.020 0.033 1.292 0.323c0.432 0.459 0.866 0.413 1.448-0.155l0.49-0.478 0.49 0.478c0.476 0.465 0.517 0.478 1.454 0.479h0.964l0.558 0.648c1.424 1.653 3.724 1.742 5.262 0.203 2.513-2.513 0.343-6.578-3.207-6.010zM22.933 8.813v0.969h-1.292v-1.938h1.292v0.969zM28.425 14.296c-0.799 0.193-1.472 0.807-2.143 1.957-0.278 0.477-0.528 0.674-1.502 1.186l-1.169 0.614-0.058 0.701c-0.149 1.804-0.9 2.135-4.852 2.138l-3.004 0.003v-1.292h2.77c3.429 0 4.127-0.241 3.698-1.276-0.239-0.576-0.601-0.662-2.795-0.662s-2.36-0.040-3.461-0.837l-0.628-0.455h-1.963c-2.474 0-2.703 0.098-4.533 1.936l-1.291 1.297 4.261 4.257 0.517-0.185c0.412-0.148 1.481-0.187 5.284-0.191l4.767-0.006 0.854-0.704c1.396-1.151 3.791-3.563 4.432-4.465 0.692-0.972 2.302-3.601 2.302-3.758 0-0.094-0.862-0.396-1.034-0.363-0.036 0.007-0.239 0.055-0.452 0.106zM4.032 20.348l-1.127 1.132 6.915 6.912 2.319-2.33-3.422-3.423c-1.882-1.883-3.452-3.423-3.49-3.423s-0.575 0.51-1.195 1.132zM6.625 22.797c-0.523 0.539-0.562 0.536-1.229-0.119-0.664-0.651-0.667-0.684-0.139-1.228l0.414-0.427 1.366 1.349-0.412 0.425z"></path>
</symbol>

CSS
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

使用此信息，然后将以下字形添加到ionicons.svg文件：

Orig:    unicode-range="U+F100-F4F7"
New:     unicode-range="U+F100-F4F8"

<glyph glyph-name="ion-valet" unicode="&#xf4f8;" horiz-adv-x="416"
d="M20.571 5.27c-1.142 0.183-2.337 1.133-2.707 2.154l-0.152 0.42h-8.292l-1.34 1.357 0.399 0.614c0.497 0.764 1.473 0.903 2.048 0.291 0.272-0.29 0.405-0.323 1.292-0.323s1.020 0.033 1.292 0.323c0.432 0.459 0.866 0.413 1.448-0.155l0.49-0.478 0.49 0.478c0.476 0.465 0.517 0.478 1.454 0.479h0.964l0.558 0.648c1.424 1.653 3.724 1.742 5.262 0.203 2.513-2.513 0.343-6.578-3.207-6.010zM22.933 8.813v0.969h-1.292v-1.938h1.292v0.969zM28.425 14.296c-0.799 0.193-1.472 0.807-2.143 1.957-0.278 0.477-0.528 0.674-1.502 1.186l-1.169 0.614-0.058 0.701c-0.149 1.804-0.9 2.135-4.852 2.138l-3.004 0.003v-1.292h2.77c3.429 0 4.127-0.241 3.698-1.276-0.239-0.576-0.601-0.662-2.795-0.662s-2.36-0.040-3.461-0.837l-0.628-0.455h-1.963c-2.474 0-2.703 0.098-4.533 1.936l-1.291 1.297 4.261 4.257 0.517-0.185c0.412-0.148 1.481-0.187 5.284-0.191l4.767-0.006 0.854-0.704c1.396-1.151 3.791-3.563 4.432-4.465 0.692-0.972 2.302-3.601 2.302-3.758 0-0.094-0.862-0.396-1.034-0.363-0.036 0.007-0.239 0.055-0.452 0.106zM4.032 20.348l-1.127 1.132 6.915 6.912 2.319-2.33-3.422-3.423c-1.882-1.883-3.452-3.423-3.49-3.423s-0.575 0.51-1.195 1.132zM6.625 22.797c-0.523 0.539-0.562 0.536-1.229-0.119-0.664-0.651-0.667-0.684-0.139-1.228l0.414-0.427 1.366 1.349-0.412 0.425z" />

但是当我使用时：

<i style="font-size:25px;" class="icon ion-valet icon-accessory"></i>

没有图标图像显示。

我认为问题的一部分可能与icomoon创建符号字体有关，该字体需要以某种方式转换为基于字形的字体（这是离子子的用途）。

如何向现有的离子子中添加新图标

0 个答案: