如何创建自定义Font Awesome 5 SVG定义? [英] How to create custom Font Awesome 5 SVG definition?

问题描述

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

I want to add a new custom SVG icon to Fontawesome 5 and assume that I need to create a definition for it in the JavaScript file.

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"],

在地址簿"的示例代码中，每个项目代表什么?

In the example code for "address-book" what do each of the items represent?

1. 448 =宽度?
2. 512 =高度?
3. [] =?
4. f2b9 =?
5. 最后一项= SVG路径?

推荐答案

您要提供给

The whole object you would feed to fontawesome.library.add(…iconDefinitions) actually looks like this:

{
  "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
  ]
}

我无法指出支持该解释的文档，但是在

I can't point out documentation to support the interpretation, but in the source code fields are used accordingly.

符号viewBox始终呈现为"0 0 <width> <height>"，因此没有x/y偏移量.

The symbol viewBox is always rendered as "0 0 <width> <height>", so no x/y offsets are possible.

我还没有找到任何实际呈现连字或定义它们的图标的js代码，因此我不确定该数组的内容是什么.因为它们将用于搜索顺序，可能是为了获取iconNames或代码点的列表.如果这与桌面连字支持有关，那么无论如何，DTP应用程序并已安装.otf文件.

I haven't found any js code actually rendering ligatures, or icons defining them, so I am not sure what the content of that array would be. As they would be used for a search order, probably its meant to take a list of iconNames or codepoints. If this is related to the desktop ligature support, it is moot outside DTP applications and having the .otf files installed, anyway.

Unicode代码点用于 CSS伪元素方法.并且应该是唯一的.所有惊人的代码点似乎都在U + F000之上，因此范围U + E000…U + EFFF看起来很适合自定义项.

Unicode codepoints are used for the CSS Pseudo-elements method. and should be unique. All fontawesome codepoints seem to be above U+F000, so the range U+E000…U+EFFF looks to be good for custom entries.

这篇关于如何创建自定义Font Awesome 5 SVG定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！