美文网首页工作生活
Vue项目中使用Iconfont字体图标

Vue项目中使用Iconfont字体图标

作者: 小王子__ | 来源:发表于2019-07-03 10:50 被阅读0次

1, 进入网站:Iconfont网址:http://www.iconfont.cn
2.,点击网站上方的“官方图标库”,选择自己喜欢的图标,并加入购物车
3,图标全部选择完成后,点击右上方的购物车,选择添加至项目,如果没登录http://www.iconfont.cn的话 会让你先登录(我选择github登录的),登录之后点击添加至项目-新建项目-确定
4,确定之后会到这个界面:

微信截图_20190703104436.png
有三种方式引入,我选择的简单的方式也就是第二个Font class方式
点击查看在线链接,会生成一个链接:
微信截图_20190703104738.png
复制链接到你的vue项目 找到index.html link引入即可
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1273625_e3o6far0cre.css">
使用的时候:
<i class="icon iconfont icon-aixin"></i>

相关文章

  • Flutter学习笔记07-Icon

    Fluttter中,可以像Web开发一样使用iconfont,iconfont即“字体图标”,它是将图标做成字体文...

  • Flutter 使用自定义字体图标icon

    Flutter中,可以像Web开发一样使用iconfont,iconfont即“字体图标”,它是将图标做成字体文件...

  • iconfont

    IconFont 原理 聊一聊字体图标的实现原理 一次性搞定 Iconfont vue项目中自动拉取更新Iconf...

  • vue使用iconfont字体图标

    如上图,下载图标到本地,只留下下图文件 在main.js中全局引入 使用图标

  • iOS - IconFont的使用

    IconFont是啥? 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和...

  • App中使用Iconfont的整套方案

    什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和...

  • 字体图标和文字垂直居中

    字体图标使用iconfont字体图标库 1. stylus样式 2. html样式

  • iconfont

    1.字体图标