给font awesome中加入自定义图片

工具: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/ 

点击右上角image

界面加载完成后,点击左上角 image

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

image

image

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

使用工具编辑image

编辑任意一个

image

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

 

打开incspace,image使用打开功能打开刚才下载的文件,注意一定要使用打开,而不要把文件拖到软件里

image使用打开后,纸张大小会变化

image使用拖动,纸张大小不会变

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

可以在原有的基础上修改

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

image随便画个什么,尽量充满画纸

image另存为,普通svg

回到网页

image

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

image默认会放到第一个

如果希望,可以移动位置image

编辑

imagetags就是生成的css的class,默认和文件名一样,可以修改,最终会生成icon-test

 

image全选

 

下方image,点完以后可能会有一段时间没反应,耐心等待

image

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

上方的image,点击后弹出更多设置

 

最后下方image

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

image,复制到原来的font目录下

打开原来的font-awesome.css

image修改这里的路径,对应到刚才的几个文件

打开下载的style.css

找到

image

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

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

 

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

posted @ 2014-02-11 14:51  czcz1024  阅读(4315)  评论(0编辑  收藏  举报