网站首页 > 技术文章 正文
前端人员在写网页的时候往往页面里面有大量的小图标,尤其是后台管理系统,想找到合适的图标需要费一些精力。可能很多人都知道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名就可以了
不知道各位前端哥哥姐姐们用的是什么样的字体图标库,能否给小弟推荐个~~
猜你喜欢
- 2024-10-08 实践干货:Axure插入图标的4种办法
- 2024-10-08 画好安防监控系统图 视频监控图标库必不可少
- 2024-10-08 前端工程师必备6大实用网站! 前端最新技术网站
- 2024-10-08 阿里巴巴矢量图标库-iconfont 阿里巴巴矢量图标库iconfont
- 2024-10-08 适用于Web开发人员使用的国外9款免费图标包
- 2024-10-08 3个步骤建立自己的图标字体库 3个步骤建立自己的图标字体库
- 2024-10-08 阿里巴巴矢量图标库iconfont正确使用方式,轻松导入前端项目
- 2024-10-08 Ionicons - 免费开源、高性能的图标库,适用于 web / APP / 桌面应用
- 2024-10-08 盘点那些免费开源、精致的图标库,无论是设计还是开发,都很好用
- 2024-10-08 Hugeicons - 优雅精致、充满活力的开源图标库,支持免费商用
你 发表评论:
欢迎- 最近发表
-
- 宇宙厂:深入聊聊 CJS 和 ESM 模块化三点核心差异?
- #前端高手进阶#一起薅羊毛~
- 前端基础进阶(十):深入详解函数的柯里化
- 2025 年 Object 和 Map 如何选择?
- 为何说 postMessage 才是真正的 setTimeout(0)?
- 为什么高手写 JS 总是又快又好?这10个技巧你要知道
- 2025 年 Deno 终于官宣 pnpm 和 Yarn 可使用 JSR?
- 宇宙厂:为什么前端要了解 Interaction to Next Paint (INP)
- Node.js 原生支持 TypeScript?开发者需要了解的一切
- 请务必用 postTask/isInputPending 释放JS主线程!
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)