ICONFONT字体图标库使用

简介: ICONFONT字体图标库使用

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

本文我们就来一起学习一下iconfont字体图标库的使用吧。

效果图:

18.png

19.png


首先,搜索一下iconfont:

20.png

选择第一个链接,点进去:

21.png

登录进去,我这边用的是自己的github账号。登录成功后,选择我的项目,去新建一个项目:

22.png23.png


24.png

项目新建好了以后,内部还没有任何图标,接下来,我们可以类似淘宝购物一样去获取想要的图标。

看到你喜欢的图标,选择添加入库!

25.png

也可以直接在搜索栏进行图标的搜索!

26.png

挑选完毕之后,我们还需要把库里的图标添加至项目:

27.png


28.png


29.png

复制一下代码,接着在对应的页面中引入:

<link type="text/css" rel="styleSheet"  href="http://at.alicdn.com/t/font_578430_rar6t76yrc545cdi.css" />

图标引用:

<i style="font-size:50px;" class='iconfont icon-changpianCD'></i>

如果是多色图标,就引入js文件,图标格式为:

<svg aria-hidden="true">
  <use xlink:href="#icon-squirtle"></use>
</svg>


相关文章
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
278 0
css:网页引入字体@font-face以及动态加载字体
|
3月前
|
前端开发 开发者
关于 FontAwesome 字体图标库的 content 属性
关于 FontAwesome 字体图标库的 content 属性
28 0
|
4月前
|
前端开发
iconfont字体图标的使用方法
iconfont字体图标的使用方法
|
10月前
|
人工智能 前端开发
前端封装库/工具库的字体/图标之Iconfont
在前端开发中,图标是不可或缺的一部分。传统的图片素材虽然能够满足需求,但使用方式较为繁琐,还会增大项目的体积和加载时间。随着前端技术的发展,字体/图标库逐渐成为了替代传统图片素材的新选择。其中一个非常流行的字体/图标库就是 Iconfont。
238 1
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1055 0
Font-Awesome4.7.0版本字体图标显示问题
|
前端开发
1、CSS中iconfont 彩色图标使用详解
1、CSS中iconfont 彩色图标使用详解
293 0
1、CSS中iconfont 彩色图标使用详解
|
前端开发
15、前端开发:CSS知识总结——iconfont图标库用法
15、前端开发:CSS知识总结——iconfont图标库用法
170 0
15、前端开发:CSS知识总结——iconfont图标库用法
|
前端开发
Vue3中使用各类字体图标的正确姿势:本地SVG、Iconfont、FontAwesome、ElementPlus(图标选择器篇)
最近,在项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Icon 之后,理应还有一个图标选择器,可以加载出不同图标库的所有可用图标,方便直接选择使用,完整代码在文末提供。
596 0
|
前端开发
CSS - Iconfont
CSS - Iconfont
182 0
CSS - Iconfont
|
JavaScript 前端开发
Vue项目使用iconfont图标库
Vue项目使用iconfont图标库
255 0
Vue项目使用iconfont图标库