如何向Font Awesome添加自制SVG图标（ASP+VS2012环境）

嘿，我刚好折腾过类似的需求，针对你在ASP+Visual Studio 2012环境下把自定义SVG图标整合到Font Awesome CSS里的问题，给你整理了一套一步步能走通的操作指南：

• 先把Font Awesome的完整包下载到本地（别只用CDN链接），解压到你ASP项目的目录里，比如~/Content/font-awesome/，这样才能修改本地的CSS和字体文件。
• 把你自己画的SVG图标整理好：尺寸尽量和Font Awesome的图标统一（比如16x16或24x24），导出的时候要选“仅保留路径”，去掉多余的群组、图层或样式，不然转字体容易出问题。

Font Awesome本质是字体图标，所以得把你的SVG转成同格式的字体文件（woff、woff2、ttf这些），推荐用免费的本地工具FontForge，操作更可控：

• 下载安装FontForge后打开，导入Font Awesome的原字体文件（比如fontawesome-webfont.ttf），这样能保证你选的编码不会和原有图标冲突。
• 找一个未被使用的Unicode编码（比如从e900开始的私用区域，Font Awesome一般不会用到这里），把你的SVG拖到这个编码对应的位置。
• 调整图标的位置和大小，对齐原有图标的基线（参考旁边自带图标的位置就行），避免显示的时候上下错位。
• 导出字体文件，选择生成woff、woff2、ttf、eot这些格式，要么覆盖原有的Font Awesome字体文件，要么单独命名（比如fontawesome-custom-webfont.ttf）。

接下来要在CSS里给自定义图标加样式，格式要和Font Awesome保持一致：

• 打开Font Awesome的主CSS文件（比如font-awesome.css），找到.fa的基础类，确保你的自定义图标能继承它的样式（比如字体家族、大小、行高）。
• 在CSS文件末尾添加自定义图标的类，示例如下：

  .fa-my-custom-icon:before {
    content: "\e900"; /* 这里填你刚才选的Unicode编码 */
  }
  

• 如果你的字体文件是单独命名的，还要修改CSS里的@font-face规则，把路径换成你新生成的文件，比如：

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

• 把修改后的CSS和新字体文件替换到项目对应的目录（比如~/Content/font-awesome/css/和~/Content/font-awesome/fonts/）。
• 在你的ASP页面里引入修改后的CSS：

  <link href="~/Content/font-awesome/css/font-awesome.css" rel="stylesheet" />
  

• 测试一下，在页面里加代码：

  <i class="fa fa-my-custom-icon"></i>
  

  刷新页面看看效果，如果大小或位置不对，可以调整CSS里的font-size或者line-height。

• 别直接修改官方的Font Awesome文件，最好复制一份出来改，以后升级Font Awesome的时候就不会覆盖你的自定义内容了。
• 如果SVG转成字体后显示模糊或者变形，回到FontForge里调整图标的路径，确保没有多余的节点，基线对齐正确。
• 在Visual Studio 2012里，改完文件后记得右键项目→清理，然后重建，避免浏览器缓存旧文件导致看不到效果。

内容的提问来源于stack exchange，提问作者abramhum