工具:http://icomoon.io 在线工具

http://www.inkscape.org/en/download/windows/ 下载安装

参考教程 http://birchenough.co.uk/edit-font-awesome-icon-add-font-awesome-font/

 

访问 http://icomoon.io/ 

点击右上角给font awesome中加入自定义图片

界面加载完成后,点击左上角 给font awesome中加入自定义图片

选择你现在正在使用的font awesome对应的svg文件,一定要是现在使用的,防止出现ico不对应

给font awesome中加入自定义图片

给font awesome中加入自定义图片

之后会加载出目前现有的ico

使用工具编辑给font awesome中加入自定义图片

编辑任意一个

给font awesome中加入自定义图片

弹出框中选择download,保存到本地

 

打开incspace,给font awesome中加入自定义图片使用打开功能打开刚才下载的文件,注意一定要使用打开,而不要把文件拖到软件里

给font awesome中加入自定义图片使用打开后,纸张大小会变化

给font awesome中加入自定义图片使用拖动,纸张大小不会变

我们需要的是他的纸张大小

可以在原有的基础上修改

也可以把原有的删掉自己重画

给font awesome中加入自定义图片随便画个什么,尽量充满画纸

给font awesome中加入自定义图片另存为,普通svg

回到网页

给font awesome中加入自定义图片

导入到set,选择刚刚制作的svg

给font awesome中加入自定义图片默认会放到第一个

如果希望,可以移动位置给font awesome中加入自定义图片

编辑

给font awesome中加入自定义图片tags就是生成的css的class,默认和文件名一样,可以修改,最终会生成icon-test

 

给font awesome中加入自定义图片全选

 

下方给font awesome中加入自定义图片,点完以后可能会有一段时间没反应,耐心等待

给font awesome中加入自定义图片

文字是e600,font awesome默认是从f000开始,如果你想继续,也可以修改这个e600

上方的给font awesome中加入自定义图片,点击后弹出更多设置

 

最后下方给font awesome中加入自定义图片

找到font文件夹中的几个文件

给font awesome中加入自定义图片,复制到原来的font目录下

打开原来的font-awesome.css

给font awesome中加入自定义图片修改这里的路径,对应到刚才的几个文件

打开下载的style.css

找到

给font awesome中加入自定义图片

这是我们刚加进去的那个ico,把这个类复制到原来的css文件中

如果使用到了ie7,你可以同样的修改一下ie7的css

 

注意,svg是矢量图,所以你的图中的 点,线 越少,生成的文件越小,否则会非常大

相关文章:

  • 2021-09-26
  • 2021-04-11
  • 2021-09-18
  • 2022-02-27
  • 2021-12-03
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-07-09
  • 2021-11-22
  • 2021-07-28
  • 2022-12-23
  • 2022-12-23
  • 2021-07-18
相关资源
相似解决方案