Question

我想在Fontawesome 5中添加一个新的自定义SVG图标，并假设我需要在JavaScript文件中为它创建一个定义。

var icons = {
"address-book": [448, 512, [], "f2b9", "M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zm-228-32c44.183 0 80 35.817 80 80s-35.817 80-80 80-80-35.817-80-80 35.817-80 80-80zm128 232c0 13.255-10.745 24-24 24H104c-13.255 0-24-10.745-24-24v-18.523c0-22.026 14.99-41.225 36.358-46.567l35.657-8.914c29.101 20.932 74.509 26.945 111.97 0l35.657 8.914C321.01 300.252 336 319.452 336 341.477V360z"],

在“地址簿”的示例代码中，每个项目代表什么？

448 =宽度？
512 =高度？
[] =？
f2b9 =？
最后一项= SVG路径？

Answer 1

您要提供给fontawesome.library.add(…iconDefinitions)的整个对象实际上是这样的：

{
  "prefix": "fa",  // probably better to use a custom one
  "iconName": "user",
  "icon": [
    512,          // viewBox width
    512,          // viewBox height
    [],           // ligatures
    "f007",       // unicode codepoint - private use area
    "M962…-112z"  // path
  ]
}

我无法指出支持解释的文档，但在source code字段中使用了accordingly。

符号viewBox始终呈现为"0 0 <width> <height>"，因此不可能有x / y偏移。

我没有发现任何实际渲染连字的js代码或定义它们的图标，所以我不确定该数组的内容是什么。由于它们将用于search order，因此可能需要列出iconNames或代码点。如果这与desktop ligature support有关，那么在DTP应用程序之外并且安装了.otf文件是没有意义的。

Unicode代码点用于CSS Pseudo-elements方法。并且应该是独特的。所有fontawesome代码点似乎都高于U + F000，因此范围U + E000 ... U + EFFF看起来适合自定义条目。

如何创建自定义Font Awesome 5 SVG定义？

1 个答案: