题 添加自定义图标到字体真棒


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

我注意到了 .svg版本的Font Awesome 主要由这些组成 <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 char是否有效?


112
2017-07-11 05:35


起源


你找到了解决方案吗?或者你刚刚选择了另一个插件? - Michel Ayres
找不到'.svg版本的Font Awesome'的链接。请更新。 - Yannis Dran
这是相关文档: github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome - Rimian


答案:


Icomoon 一试。您可以上传自己的SVG,将它们添加到库中,然后创建一个自定义字体,将FontAwesome与您自己的图标相结合。


106
2017-07-16 03:05



谢谢:)这有很多帮助! - Johnny Zhao
很棒的服务。感谢那。在svgs中生成自定义图标集,而不是时间。 - Nodoze
好工具。完善。:) - Christian Mark
嗨,我已经生成了包含svg图标的文件夹的字体图标。但后来我想添加一个图标,是否可以添加?或者我必须用文件夹生成? - Varadha31590


你可以给 fontcustom 一个go,它从svg文件创建自己的字体。


31
2018-01-03 18:28



域名已于10月2日到期 - Aerious
这里是 github项目 直到他们解决了 域名问题。 - Glen


取决于你拥有的东西。如果你的svg图标只是一个路径,那么只需将'd'属性复制到一个新的<glyph>元素就可以轻松添加该字形。但是,路径需要缩放到字体的坐标系(EM-square,通常为[0,0,2048,2048] - Truetype字体的标准)并与您想要的基线对齐。

然而,并非所有浏览器都支持svg字体,因此如果您希望它能够在任何地方工作,您将不得不将其转换为其他格式。

Fontforge 可以导入svg文件(选择一个字形槽,文件>导入,然后选择你的svg图像),然后你可以转换为所有相关的字体格式(svg,truetype,woff等)。


17
2017-07-11 12:08





与@ 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并创建单个图层形状作为新的字体图标
  • 保存SVG文件,关闭Inkscape
  • 打开FontForge(如果你有多个显示器,使用Windows-LeftArrow,重新定位,因为他们有奇怪的SWING java窗口关闭监视器,并有弹出窗口的模态问题 - 我不得不检查我的任务栏一些)
  • 档案|打开fontawesome-webfont.svg
  • 档案|进口
  • 滚动到底部,右键单击图标|雕文信息
  • 将字形名称更新为uniFXXX(XXX类似于501,比FontAwesome的v4.5中使用的最高Unicode更高的数字)
  • Unicode Vlaue U + fXXX
  • 单击确定
  • 档案|保存
  • 档案|生成字体...
  • 关闭FontForge
  • 打开您的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;
    }

我知道评论其他文件类型可能是“有争议的”,但很高兴听到如何在评论中生成.eot或.otf文件。

  • 最后,正如Samuel所提到的那样,用以下内容更新您的CSS / LESS:

    .fa-XXX:在{content:“\ f501”之前; }


13
2018-01-28 05:54





我建议将你的图标分开 FontAwesome 并创建和维护您自己的自定义库。就个人而言,我认为维持保养要容易得多 FontAwesome如果您要创建自己的图标库,请单独分开。然后,您可以通过CDN将FontAwesome加载到您的站点中,而不必担心保持最新状态。

创建自己的自定义图标时,请通过创建每个图标 Adobe Illustrator 或类似的软件。创建图标后,将每个图标单独保存 SVG 格式在您的计算机上。

接下来,前往 IcoMoonhttp://icomoon.io ,它有最好的字体生成软件(在我看来),它是免费的。 IcoMoon 将允许您将单个svg保存的字体导入字体库,然后生成自定义图标字形库 eotttfwoff,和 svg。一种格式 IcoMoon 不生成是 woff2

生成图标包后 IcoMoon,前往 FontSquirrelhttp://fontsquirrel.com 并使用他们的字体生成器。用你的 ttf 生成的文件 IcoMoon。在新生成的图标包中,您现在将拥有自己的图标包 woff2 格式。

确保文件 eotttfsvgwoff,和 woff2 都是一样的名字。您正在从两个不同的网站/软件生成图标包,并且他们会以不同的方式命名其生成的输出。

您将在两个位置为您的图标包生成CSS。但是CSS生成了 IcoMoon 将不包括 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;
}

请记住,您可以使用。获取图标包中每个图标的字形unicode值 IcoMoon 软件。这些值有助于通过CSS分配您的图标,如(假设我们正在使用 font-family 在示例中声明 @font-face {...} 以上):

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

您还可以获取字形unicode值 e953 如果你打开font-pack生成的 svg 文件编辑器中的文件。例如。:

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

10
2017-12-22 16:55



不工作,。,。完成整个过程只是图标不出现而是出现数字 - Inzmam Gujjar
你能详细说明一下吗?我很乐意帮助您解决问题。你有没有说明 font-family: customiconpack; 和你的 selector:after ?让我现在更新我的解决方案 selector:after 代码示例。 - Pegues
我上传了我的图标svg文件。我下载了文件,。,我把那些在项目中添加新的css文件放到项目中,将你的代码复制到文件中,用我的图标代码更改了代码,。不起作用。 - Inzmam Gujjar
请加入我创建的聊天室,以便我们更轻松地讨论问题: chat.stackoverflow.com/rooms/132402/... - Pegues
我在这里发表评论只是为了让其他人知道问题是您是从导入的PNG在Illustrator中创建的SVG。您必须将图标重新创建为矢量。 PNG是栅格格式,没有矢量曲线。 - Pegues


在Font Awesome 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 path data”标记的元素将被指定为的值 d 属性 <path> 作为孩子的元素 <svg>。像这样(为了清楚起见,省略一些细节):

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

(改编自我在这里的类似答案: https://stackoverflow.com/a/50338775/4642871


4
2018-05-14 22:11



如果我们想使用标准前缀怎么办,那么新的svg可以放入网站? - Norbert Kardos
你可以使用你喜欢的任何前缀。但是如果你使用标准前缀(fab, fas, far, fal)你将面临更大的命名冲突风险 - 如果不是现在,那么可能在未来我们继续添加带有这些标准前缀的图标。使用自定义前缀不会使svg不太可能“适应网站” - 但我不确定你的意思是什么,所以也许你可以澄清一下? - mwilkerson
我们需要一个特定的社交品牌图标(有200M +用户),这已经被要求了。我们想将这个svg图标添加到专业版,以便在网站上使用它,而不会产生html / css异常/其他情况。所有其他品牌都已经有了图标,所以fab类就出现在元素上(实际选择的品牌是dinamycally添加到css) - Norbert Kardos
是的,可以使用标准前缀添加自定义图标。请记住,如果图标名称最终与我们稍后添加到该前缀的内容相同,则会发生冲突。那么可能选择一个不太可能发生冲突的图标名称? Forked CodePen演示: codepen.io/fontawesome/pen/pZWXYX - mwilkerson


我研究了一下SVG webfonts和字体创建,在我看来,如果你想要将字体“添加”到字体很棒的已经存在的字体,你需要做以下事情:

转到inkscape并创建一个字形,将其保存为SVG,以便您可以读取代码,确保为其分配当前未使用的unicode字符,这样它就不会与字体中的任何现有字形冲突。这可能很难,所以我认为更简单的方法是用你自己的替换现有的字形(只需选择一个你不使用的,复制第一部分:

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

一旦完成,你应该有一个SVG,其中一个字形被替换,在这种情况下你就完成了。如果不是,你需要为你的新字形创建CSS,在这种情况下尝试并重用FAs现有的CSS,并且只添加

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


3
2018-05-21 10:09





如果你想要一些来自font-awesome的图标(或全部),包括你的自定义svg图标,你可以:

1-转到 http://fontawesome.io/ 下载zip并解压缩 - 例如在桌面中。

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

3-登录后,单击标题选项:添加更多图标。

4-选择位于字体中提取的zip中的字体awesome的SVG。

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

6-内部主页(位于页面标题处)选择要下载的图标,自定义它们以提供自定义名称,然后选择发布以获取链接或下载字体和CSS。

抱歉我的英文! :d


1
2018-05-03 11:49