在项目中添加自定义的font图标

网站UI必不可少的就是fonts图标,给大家讲一下如何自定义font图标

1、感谢阿里提供的图标库:http://www.iconfont.cn/collections

2、登录后选取自己想要的图标,点击添加入库。

3、全部选取完成后一起添加至项目(是添加到你自己的阿里图标项目)

4、去你的项目里把你的图标库下载至本地并且解压

5、解压后把所有文件放到web项目中的public/fonts内

6.修改iconfont.css中@font-face代码中的url路径(就是加上放字体图标的路径,为了打包css)

比如一般字体图标都放在public/fonts内,所以就加上/fonts/

@font-face {

font-family: "iconfont";

src: url('/fonts/iconfont.eot?t=1498904979374'); /* IE9*/

src: url('/fonts/iconfont.eot?t=1498904979374#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('/fonts/iconfont.woff?t=1498904979374') format('woff'), /* chrome, firefox */

url('/fonts/iconfont.ttf?t=1498904979374') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('/fonts/iconfont.svg?t=1498904979374#iconfont') format('svg'); /* iOS 4.1- */

}

7、把iconfont.css打包到要使用的css文件中

8、然后就可以开心的使用自定义图标啦(使用方法看一起下载下来的html文件,不在详述)

9、Thanks♪(・ω・)ノ

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容