网站首页 > 技术文章 正文
前端人员在写网页的时候往往页面里面有大量的小图标,尤其是后台管理系统,想找到合适的图标需要费一些精力。可能很多人都知道iconfont,但是把一个个小图标下载下来让项目的图片文件夹显得臃肿不堪。
虽然bootstrap里面有一些不错的字体图标,但实在少的可怜,而且class命名也是长的醉人。最近在做项目的时候,我一直都在用一个字体图标库,在这里分享给大家。
Font Awesome
就是这个啦。
官网地址是
http://fontawesome.dashgame.com/
Font Awesome为我们提供了可缩放的矢量图标,还可以使用CSS所提供的所有特性对它们进行更改,包括大小、颜色、阴影或者其他任何支持的效果。
最简单的使用方式
一句话将Font Awesome加入的网页中。完全不用下载或者安装任何东西!
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
就这样了。引入之后是这样用的:
您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i>,因为它更简洁。 但实际上使用 <span>才能更加语义化。
<i class="fa fa-camera-retro"></i>
样式多种多样!还有动图
只需要引用class名就可以了
不知道各位前端哥哥姐姐们用的是什么样的字体图标库,能否给小弟推荐个~~
猜你喜欢
- 2025-07-01 程序员们尽量用免费或开源的来替代这些付费开发工具
- 2025-07-01 用DeepSeek生成炫酷网页(附完整提示词)
- 2025-07-01 基于物料的前端技术架构与共建方案
- 2025-07-01 10个冷门但非常实用前端开发者很少用的CSS规则
- 2025-07-01 必须掌握的前端开发基础知识,什么是字体图标?
- 2025-07-01 前端开发应该了解的八个浏览器 API
- 2025-07-01 写了100多篇原创文章,我常用的在线工具网站推荐给大家
- 2025-07-01 整理弱电行业常用的CAD设计图例,系统图标,系统拓扑
- 2025-07-01 字节跳动开源,超过2000个图标的高质量图标库——IconPark
- 2025-07-01 Heroicons - 漂亮精致的开源矢量图标库,由Tailwind CSS 官方出品
你 发表评论:
欢迎- 590℃几个Oracle空值处理函数 oracle处理null值的函数
- 583℃Oracle分析函数之Lag和Lead()使用
- 570℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 568℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 563℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 555℃【数据统计分析】详解Oracle分组函数之CUBE
- 541℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 536℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)