添加自定义图标字体真棒(Add custom icons to font awesome)

我爱的字体真棒图标字体，并希望使用它的大部分在我的网站的图标，但也有我需要除了什么提供了一些自定义的SVG图标。

我注意到， 字体真棒的.SVG版本大多这些构成<glyph />元素：

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

那就把我的SVG图标的代码，将其粘贴在一个新的符号元素，并指定一个未使用的Unicode字符是有效的？

Answer 1:

给Icomoon一试。 您可以上传自己的SVGs，将它们添加到库中，然后创建一个自定义字体FontAwesome用自己的图标组合。

Answer 2:

你可以给fontcustom一去，从SVG文件创建自己的字体。

Answer 3:

取决于你有什么。 如果您的SVG图标仅仅是一个路径，那么这是很容易通过仅仅复制“d”属性到一个新的<字形>元素添加字形。 但是，路径需要缩放到字体的坐标系统（EM-方，通常是[0,0,2048,2048] - TrueType字体的标准），并与你想要的基线对齐。

并非所有的浏览器都支持SVG字体不过，这样你将不得不如果你想让它无处不在的工作，将其转换为其他格式了。

Fontforge可以导入SVG文件（选择字形槽，文件>导入，然后选择您的SVG图像），然后你可以转换到所有相关的字体格式（SVG，TrueType字体，WOFF等）。

Answer 4:

类似的方法来@塞缪尔 - 伯格斯特龙：

• 下载Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• 下载FontForge http://fontforge.github.io/en-US/downloads/
• 下载Inkscape中
• 打开Inskscape并创建一个单层的形状，你的新字体图标
• 保存SVG文件，关闭Inkscape中
• 打开FontForge（如果您有多个显示器，使用Windows的LEFTARROW，重新定位，因为他们有奇怪的SWING的Java窗户，熄灭显示器，并有弹出窗口模式的问题 - 我不得不检查我的任务栏一段）
• 文件| 打开fontawesome-webfont.svg
• 文件| 进口
• 滚动至底部，右键点击图标| 雕文信息
• 更新字形名称到uniFXXX（XXX是像501，比FontAwesome的V4.5使用的最高Unicode的一个较大的数字）
• Unicode的Vlaue U + FXXX
• 点击OK
• 文件| 保存
• 文件| 生成字体...
• 关闭FontForge
• 打开web项目
• 您的字体文件复制到（在我的项目）“\内容\字体\”文件夹中。
• 编辑 “\内容\风格\ FA \ path.less” 是这样的：

 @font-face { font-family: 'FontAwesome'; //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); src: //url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'), url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'), url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg'); // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts font-weight: normal; font-style: normal; } 

我知道这可能是“有争议的”注释掉其他文件类型，但很高兴听到如何生成的评论.eot或杂项文件的文件。

• 最终，塞缪尔·提到，更新您的CSS / LESS有：

  .fa-XXX：前{内容： “\ F501”; }

Answer 5:

我建议让你的图标从FontAwesome分离，创建和维护自己的自定义库。 就个人而言，我觉得这是很容易保持保持FontAwesome分开，如果你将要创建自己的图标库。 然后，您可以有FontAwesome加载到你的网站从CDN，从不担心使其保持最新状态。

当创建自己的自定义图标，创建通过Adobe Illustrator或类似的软件每个图标。 一旦你的图标被创建，在单独保存每个SVG格式您的计算机上。

其次，头部到IcoMoon： http://icomoon.io ，具有最佳字体生成软件（在我看来），而且是免费的。 IcoMoon将允许您导入单个SVG-保存的字体到字体库，然后生成您的自定义图标图形库eot ， ttf ， woff和svg 。 一种格式IcoMoon不会产生是woff2 。

在IcoMoon在生成您的图标包，头FontSquirrel后： http://fontsquirrel.com并使用其字体生成。 用你的ttf在IcoMoon生成的文件。 在创建新生成的图标包，现在你必须在你的图标包woff2格式。

确保了文件的eot ， ttf ， svg ， woff和woff2都是相同的名称。 您正在生成从两个不同的网站/软件的图标包，和他们不同的名称及其生成的输出。

你必须在这两个位置的图标包生成CSS。 但在IcoMoon产生的CSS将不包括woff2在您的格式@font-face {}声明。 确保补充一点，当你将你的CSS到您的项目：

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

请记住，你可以使用IcoMoon软件让你的图标包每个图标的字形Unicode值。 这些值可以在通过CSS分配你的图标，如会有所帮助（假设我们正在使用的font-family的例子声明@font-face {...}以上）：

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

您还可以得到字形Unicode值e953如果你打开字体包生成svg在文本编辑器文件。 例如：

<glyph unicode="&#xe953;" glyph-name="eye" ... />

Answer 6:

在字体真棒5，您可以创建自定义的图标，你自己的SVG数据。 这里有一个演示GitHub库 ，你可以玩。 而且这里有一个CodePen ，说明如何类似的东西可能在完成<script>块。

在任一情况下，它仅仅涉及使用library.add()添加对象是这样的：

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

注意，由评论“SVG路径数据”的代码示例中标记的元件是什么将被指定为值d属性的上<path>元件，其的子<svg> 像这样（留出为清楚起见，一些细节）：

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

（从我类似的回答改编这里： https://stackoverflow.com/a/50338775/4642871 ）

Answer 7:

我研究了一下到SVG网络字体和字体创作，在我眼里，如果你想“增加”的字体，字体真棒，你需要做以下的已有的字体：

去Inkscape中，并创建一个字形，将其保存为SVG，所以你可以阅读代码，请务必将其分配当前未使用的，所以它不会与任何字体的现有字形的冲突的Unicode字符。 所以，我认为一个更好更简单的approad将与被替换现有的字形，这可能是很难自己（只选择一个你不使用，复制第一部分：

保存SVG然后将其转换使用任何网络转换器，web字体让你的web字体将工作在所有浏览器。

一旦做到这一点，你应该有任何与更换的字形在这种情况下就大功告成之一的SVG。 如果不是你需要创建CSS为你的新的符号，在这种情况下，尝试和重用现有的FA CSS和只添加

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}

Answer 8:

如果你想从一些图标（或全部）字体真棒包括YOUT定制SVG图标，您可以：

1转到http://fontawesome.io/下载压缩和解压，它例如在桌面上。

2 -转到http://fontastic.me/使用电子邮件来创建一个帐户。

3-一旦你已经登录点击标题选项：添加更多的图标。

4-选择的位于里面的字体您提取拉链字体真棒的SVG。

5重复procces上传自己的SVG文件。

6-家庭内（在页面的标题），选择要下载的图标，自定义它们来给你的自定义名称，并选择发布到有一个链接或下载的字体和CSS。

对不起我的英语！ ：d

文章来源: Add custom icons to font awesome