当前位置：网站首页 > 编程网 > 正文

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

yuyutoo 2024-10-12 01:16 10 浏览 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名就可以了

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

fontawesome