美文网首页
Font Awesome图标库的使用方法

Font Awesome图标库的使用方法

作者: MC桥默 | 来源:发表于2020-02-13 11:41 被阅读0次

前言

在项目中,往往会使用到小图标,我们可以直接使用UI给的图,但是这样多次改变图标的颜色好像有点麻烦。
笔者习惯使用阿里提供的矢量图,用什么图标就直接选择并添加什么图标,可以直接通过css里面的color和font-size来改变其颜色和大小。
另外,font awesome也是不错的选择,同样可以轻松改变图标的颜色和字体大小,还有其他特色的功能,本文主要介绍font awesome的使用方法。

在站点中引入Fontawesome字体

1、下载font awesome官网,点击DownLoad下载 资源文,官网地址:http://fontawesome.dashgame.com/
2、解压源文件,源文件如下图。将CSS(样式文件),fonts(字体)将两个文件夹拷贝到站点中。

font-awesome.png
3、注意,在使用的时候,css文件夹和fonts文件夹必须为同一级别,直接将css里面的font-awesome文件引入到html文件中就可以使用,不需要处理fonts文件夹。
4、在HMTL文件中,引入CSS(发布使用min(压缩版本),调试可以使用未压缩的) ,如:
font-awesome-1.png

使用教程

使用教程详见font-awesome官网,再此不做赘述
http://fontawesome.dashgame.com/

相关文章

  • Font Awesome 学习笔记

    什么是Font Awesome? [Font Awesome][fontawesome] 是一款开源的字体图标库,...

  • Font Awesome 5 新特性

    上一篇文章:Font Awesome 4.7 图标库用法详解中,讲解了如何上手使用Font Awesome 的主流...

  • 字体图标

    常用的字体图标 [阿里字体图标库]http://iconfont.cn/ [Font Awesome]http:/...

  • Font Awesome图标库的使用方法

    前言 在项目中,往往会使用到小图标,我们可以直接使用UI给的图,但是这样多次改变图标的颜色好像有点麻烦。笔者习惯使...

  • 前后端分离-阿里百秀项目

    1. 项目技术 客户端使用了:jQuery + Ajax + 模板引擎 + font-awesome(字体图标库)...

  • 画一颗跳动的心

    引入图标库Font Awesome 使用该图标库里的heart图标 这是一个静态的图标,而且是灰色的,所以我们给这...

  • e-icon-picker 基于element-ui图标和fon

    e-icon-picker 图标选择组件 简洁大方,专为element-ui和font-awesome图标库开发的...

  • 配置angular使用Font Awesome

    Include Font Awesome 包含 Font Awesome Font Awesome gives y...

  • 字体库

    阿里巴巴矢量图标库: Iconfont Font Awesome,一套绝佳的图标字体库和CSS框架 Materia...

  • 工具库

    1、Font Awesome 安装font-awesome a、npm install font-aweso...

网友评论

      本文标题:Font Awesome图标库的使用方法

      本文链接:https://www.haomeiwen.com/subject/fxykfhtx.html