专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

还在为写web页面找不到各种图标而发愁吗?用这个完美解决

ins518 2024-10-08 08:22:47 技术文章 12 ℃ 0 评论

前端人员在写网页的时候往往页面里面有大量的小图标,尤其是后台管理系统,想找到合适的图标需要费一些精力。可能很多人都知道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名就可以了

不知道各位前端哥哥姐姐们用的是什么样的字体图标库,能否给小弟推荐个~~

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表