ICONFONT字体图标库使用

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

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

效果图:

首先,搜索一下iconfont:

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

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

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

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

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

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

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

<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>

源码下载地址: PC: http://java520.top/article/3474.html 手机:http://java520.top/article/3474.html?app=1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

beego上传文件

html代码: <form id="fform" method="POST" enctype="multipart/form-data"> ...

55240
来自专栏我的博客

关于ftp限制用户到自己家目录

写在前面: ftp是有版本的区分的! 老版本可以参考这个:http://blog.phpfs.com/archives/244.html 新版的我用上面那个怎么...

46740
来自专栏我的博客

SVN更新网站

安装SVN看这里:http://blog.phpfs.com/archives/1525.html svn checkout http://192.168.1....

34650
来自专栏我的博客

Apache开启浏览器缓存、开启gizp

ExpiresActive On ExpiresDefault "access plus 12 month" ExpiresByType text/html "...

30760
来自专栏王磊的博客

有关PHP、HTML单引号、双引号转义以及转成HTML实体的那些事!

一、单引号和双引号转义在PHP的数据存储过程中用得比较多,即往数据库里面存储数据时候需要注意转义单、双引号; 先说几个PHP函数: 1、addslashes —...

89170
来自专栏王磊的博客

jQuery.html()方法ie下不能设置html代码的问题

jQuery一般来说还是很好用的,但有时候它也会有些问题的,比如jQuery的html()方法设置html代码,在一种情况下,ie6、ie7、ie8 下是不能...

415110
来自专栏王磊的博客

easyui-datagrid行数据field原样输出html标签

easyui-datagrid 绑定的行 field 原样输出html标签。处理效果如图: ? Html页面代码如下: ... <tr> <th...

44990
来自专栏机器之心

资源 | 深度学习自动前端开发:从草图到HTML只需5秒(附代码)

选自InsightDataScience 作者:Ashwin Kumar 机器之心编译 参与:乾树、李泽南 在人们的不断探索下,「使用人工智能自动生成网页」的方...

60790
来自专栏我的博客

ThinkPHP3.1.2笔记

1.开启trace 方法一:在配置文件中添加(默认在config.php,如果定义debug模式,可以定义在debug.php) SHOW_PAGE_TRAC...

28380
来自专栏我的博客

MySQL全文索引

1.全文搜索限制条件 文搜索只适用于 MyISAM 表。 全文搜索可以同大多数多字节字符集一起使用。Unicode属于例外情况; 可使用utf8 字符集 , ...

46750

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励