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

8 回答

• 17

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

  回复于 2024-05-09T17:42:20+08:00
• 12

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

  回复于 2024-05-09T17:42:20+08:00
• 13

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

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

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

  回复于 2024-05-09T17:42:20+08:00
• 32

  与@ 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”之前; }

  回复于 2024-05-09T17:42:20+08:00
• 110

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

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

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

  在 IcoMoon 生成图标包后，转到 FontSquirrel ：http://fontsquirrel.com并使用其字体生成器 . 使用 IcoMoon 生成的 ttf 文件 . 在新生成的图标包中，您现在可以使用 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';
      }
  

  如果在文本编辑器中打开font-pack生成的 svg 文件，也可以获取字形unicode值 e953 . 例如 . ：

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

  回复于 2024-05-09T17:42:20+08:00
• 3

  在Font Awesome 5中，您可以使用自己的SVG数据创建自定义图标 . 这是你可以玩的demo GitHub repo . 并且here's a 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）

  回复于 2024-05-09T17:42:20+08:00
• 5

  我研究了一下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)
  >}
  

  回复于 2024-05-09T17:42:20+08:00
• 1

  如果你想要一些来自font-awesome的图标（或全部），包括你的自定义svg图标，你可以：

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

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

  3-登录后，单击 Headers 选项：添加更多图标 .

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

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

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

  抱歉我的英文！ ：d

  回复于 2024-05-09T17:42:20+08:00