博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端工具----iconfont
阅读量:5063 次
发布时间:2019-06-12

本文共 634 字,大约阅读时间需要 2 分钟。

  在一张页面中我们经常会看见一些小的图标,这些图标小巧、意义明确,总之非常有用,难道他们是一些小图片吗。不错有的的确是小图片,但是在这里我将介绍另外一款工具那就是我们可以把这些图标当做一个个文字来对待,因此我们可以调整它的大小和颜色。下面我来介绍一下如何使用。

  iconfont有两种引入方式,一是在html的style标签中引入iconfont官网生成的自动链接,二是将选中的字体图标下载到本地,利用link标签引入外部css文件。

  在线使用:

    

  

  点击获取在线链接就可以,当然如果你要下载到本地使用就点击下载到本地,然后在需要的位置引入你想要的图标:

  注意:这里的class的值必须要包含iconfont这个属性值,每一个图标都会对应一个编码,上面就是

 

  来自知乎:

  官方:http://www.iconfont.cn/help/iconuse.html

  下载到本地:

    下载到本地后,我们解压会看到如下文件:

  我们把它全部复制到工程中然后利用标签引入iconfont.css即可。 

  那么就会在页面中出现你要的图标展示效果,怎么样不错吧!

  当然还有其他一些字体图标库,比如 ,有兴趣也可以看看。

  目前正在准备一些前端开发常用的工具,大家有的话欢迎进行交流!

  

  

  

转载于:https://www.cnblogs.com/djlxs/p/5188174.html

你可能感兴趣的文章
python使用上下文对代码片段进行计时,非装饰器
查看>>
【bzoj5099】[POI2018]Pionek 双指针法
查看>>
session如何保存在专门的StateServer服务器中
查看>>
react展示数据
查看>>
测试计划
查看>>
选择器
查看>>
Mysql与Oracle 的对比
查看>>
OGG同步Oracle到Kafka(Kafka Connect Handler)
查看>>
idea的maven项目无法引入junit
查看>>
jquery实现限制textarea输入字数
查看>>
thinkphp5 csv格式导入导出(多数据处理)
查看>>
如何获取Android系统时间是24小时制还是12小时制
查看>>
fur168.com 改成5917电影
查看>>
PHP上传RAR压缩包并解压目录
查看>>
Codeforces 719B Anatoly and Cockroaches
查看>>
jenkins常用插件汇总
查看>>
c# 泛型+反射
查看>>
第九章 前后查找
查看>>
Python学习资料
查看>>
多服务器操作利器 - Polysh
查看>>