添加自定义图标字体真棒

我喜欢Font Awesome图标字体，并希望将其用于我网站上的大多数图标，但除了提供的内容外，还有一些我需要的自定义svg图标。

我注意到Font Awesome的.svg版本主要由这些<glyph />元素组成：

 ... <glyph unicode="" 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="" 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="" 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一个尝试。 您可以上传自己的SVG，将它们添加到库中，然后创build一个自定义字体，将FontAwesome与您自己的图标组合在一起。

Answer 2

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

Answer 3

取决于你有什么。 如果您的svg图标只是一个path，那么通过将“d”属性复制到新的<glyph>元素来添加该字形是很容易的。 但是，path需要缩放到字体的坐标系（EM平方，通常是[0,0,2048,2048] – Truetype字体的标准），并与您想要的基线alignment。

但是并不是所有的浏览器都支持svg字体，所以如果你想让它在任何地方都能正常工作的话，你还得把它转换成其他的格式。

Fontforge可以导入svg文件（select一个字形槽，文件>导入，然后select您的svg图像），然后可以转换为所有相关的字体格式（SVG，truetype，WOFF等）。

Answer 4

类似的方法@ Samuel-bergström：

• 下载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并创build一个单层graphics作为新的字体图标
• 保存SVG文件，closuresInkscape
• 打开FontForge（如果你有多个显示器，使用Windows-LeftArrow重定位，因为他们有怪异的SWING Java窗口closures监视器，并有popup窗口的模态问题 – 我不得不检查我的任务栏的一些）
• 文件| 打开fontawesome-webfont.svg
• 文件| import
• 滚动到底部，右键单击图标| 雕文信息
• 将字形名称更新为uniFXXX（XXX与501相似，比FontAwesome v4.5中使用的最高统一码要高）
• Unicode Vlaue U + fXXX
• 点击OK
• 文件| 保存
• 文件| 生成字体…
• closuresFontForge
• 打开你的web项目
• 将您的字体文件复制到（在我的项目中）“\ Content \ fonts \”文件夹中。
• 编辑“\ Content \ styles \ 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; } 

Answer 5

我build议让你的图标与FontAwesome分开，并创build和维护自己的自定义库。 就个人而言，我认为如果要创build自己的图标库，保持FontAwesome独立性更容易。 然后，您可以从CDN将FontAwesome加载到您的网站中，而不必担心保持最新状态。

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

接下来，转到IcoMoon ： http : //icomoon.io ，它有最好的字体生成软件（在我看来），它是免费的。 IcoMoon将允许您将个人SVG保存的字体导入到字体库中，然后在eot ， ttf ， woff和svg生成自定义图标字形库。 IcoMoon不会生成的格式是woff2 。

在IcoMoon生成你的图标包后，转到FontSquirrel ： http : //fontsquirrel.com并使用它们的字体生成器。 使用您在IcoMoon生成的ttf文件。 在新创build的图标包中，您现在将拥有woff2格式的图标包。

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

您将在两个位置为您的图标包生成CSS。 但是在IcoMoon中生成的CSS将不会在@font-face {}声明中包含woff2格式。 请确保在将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-face {...}声明的font-family ）：

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

如果在文本编辑器中打开字体包生成的svg文件，也可以得到字形unicode值e953 。 例如：

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

Answer 6

我研究了一下SVG的网页字体和字体创build，在我眼里，如果你想“添加”字体到字体真棒已经存在的字体，你需要做以下几点：

去inkscape并创build一个字形，保存为SVG，所以你可以读取代码，确保分配一个目前不使用的Unicode字符，所以它不会与字体中的任何现有的字形冲突。 这可能是困难的，所以我认为一个更好的更简单的方法是用你自己的replace现有的字形（只select一个你不使用，复制第一部分：

保存svg，然后使用任何在线转换器将其转换为networking字体，以便您的webfont可以在所有浏览器中工作。

一旦完成，你应该有一个SVG与其中一个字形replace，在这种情况下你已经完成。 如果不是，则需要为新的字形创buildCSS，在这种情况下，尝试重用FA现有的CSS，并只添加

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

Answer 7

如果你想从字体，包括你自定义的SVG图标的一些图标（或全部），你可以：

1-进入http://fontawesome.io/下载压缩包并解压缩，例如在桌面上。;

2-访问http://fontastic.me/使用您的电子邮件来创build一个帐户。;

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

4-select位于字体内提取的zip中的font-awesome的SVG。

5-重复上传你自己的svg文件。

6-首页（在页面的标题）select你想要下载的图标，定制它们给你的自定义名称，并select发布有链接或下载字体和CSS。

对不起我的英文！ ：d

Answer 8

去fontawesome.com并select适合您的底部的许可证包。