如何使用字体图标库-Font Awesome

字体图标库在前端的应用很多,字体图片应用起来灵活,可以随意设置大小,颜色,就跟设置字体样式一样,如果应用图片图标的话,就会麻烦很多,下面介绍一下Font Awesome的使用。

操作方法

  • 01

    下载Font Awesome的文件包

  • 02

    解压缩 一共有如下图所示的文件

  • 03

    提取需要的文件 在css中复制一个样式文件(如果使用的是less和sass版的请到相应的文件夹); 将fonts文件复制。

  • 04

    将上述复制的两个文件粘贴到你的项目中 打开font-awesome.css的文件,根据红框的显示可以知道,css目录和fonts目录是同级的,注意以免找不到图标文件。

  • 05

    项目中引入样式文件 直接link进来就行了

  • 06

    应用字体图标 <i class="icon-back fa fa-chevron-left"></i> class中的fa必须,然后用你选取的图标名称前+“fa-” 下图二中可以看到我们想设置字体一样设置了图标的样式

  • 07

    如下图红框所以,我们成功应用了Font Awesome图标

(0)

相关推荐

  • Axure中使用Iconfont-阿里巴巴矢量图标库

    Axure RP8中自带了不少图标,但实际设计原型时还是会有不合适或找不到的图标.Iconfont-阿里矢量图标库 内容丰富,不比外国的知名网站少,而且内容更符合国人使用需求,最重要的是免费+速度快. ...

  • Android Studio自带图标库和开源图标库怎么使用?

    Android 的开发离不开各式各样的图标,很多小伙伴可能不知道Android 有自带的图标库,在这里小编为大家介绍一下Android studio自带的图标库和介绍一下Android studio上 ...

  • 撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)

    暴雪公司的作品一直是游戏精品的代表,就算你不是撸粉儿,但也一定听过他们的大名.至少就连没玩过撸啊撸的小编也听说过很多因它而生的美好情缘的故事.嘿嘿,闲扯了这么多,不过今天的主题却不是撸LOL,而是仿照 ...

  • 如何在Axure中使用FontAwesome字体图标

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. FontAwesome应用在web网页开发中非常方便, ...

  • win10怎么调整字体图标大小

    win10系统的字体和图标大小一般都是默认适合正常人的,然而有些视力欠佳的人可能就不能得到良好的使用体验.其实,我们可以通过调节显示设置来使他们也能正常使用win10. 操作方法 01 点击通知栏,点 ...

  • Font Awesome图标如何引用到网页上

    Font Awesome是一套免费的.开源的.绝佳的图标字体库和CSS框架,Github为该项目提供CDN.为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色. ...

  • 缺少OCR A Extended字体怎么办?XP怎么装字体库

    重装系统后朋友打开税务软件,发现打印发票时候提示缺少OCR A Extended等字体的提示,由于字体缺失进而无法打印.于是求助本人,那么本介绍这种情况下怎么办,顺便说明下XP系统怎么安装. 操作方法 ...

  • 如何把你的图标转换成web字体

    在这篇教程中,我们将看看如何使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体.然后在看看如何使用生成的字体通过css应用到Web页面中. 使用字体图标的优势 字体图标除了图像清晰度之 ...

  • 【Windows XP】调整桌面图标字体大小

    在Windows7中我们会发现可以选择小图标显示,但是在xp中我们没有看到,其实Windows中使图标缩小要比Windows7要强大很多,只是在Windows XP没有强悍的表现出来,下面我来告诉大家 ...