使用font-awesome字体图标库，让你的网站好看10倍

2024-05-07 18:32:52

前言

在网站开发中，往往需要加上一些图标的点缀来使页面显得更加美观和友好。但是对于一些缺乏设计能力的人员（比如本人），想自己制作一套好看的图标比较麻烦。font-awesome可以帮助我们解决这个问题。

阿里云官网使用的字体图标

font-awesome是一款完全免费的基于css框架的网页字体图标库,提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以通过CSS定义的样式。

一、安装

对于个人开发测试，可以通过免费的cdn地址直接引入font-awesome，也可以通过npm安装。

<link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">

二、挑选图标

可以去font-awesome中文网挑选自己想要的图标，地址是：http://www.fontawesome.com.cn/faicons/

三、加载图标

可以看到，每个图标后面有一个英文标识，我们在需要使用图标的地方加上下面这个代码就可以使用图标。

<i class="fa fa-英文标识"></i>

比如联系人那个图标的代码为：

<i class="fa fa-address-book"></i>

显示效果如下：

四、设置样式

我们可以通过css来控制字体图标的样式，比如红色的图标：

<i style="color:red;" class="fa fa-address-book"></i>

超大的图标：

<i style="font-size:30px;" class="fa fa-address-book"></i>

五、优点

使用字体图标不仅可以省去设计图标的工作，相比使用图片类型的图标，可以更方便地控制图标的颜色、大小等样式,图标悬浮变色等特效可以直接通过css的hover来实现，还可以减少页面对图片的请求量，提高网站的加载速度和提升用户体验。

关注微信公众号“全栈社区”，可获取更多站长、开发者必备的前端、后端、运维技术干货。
旭猫云19元VPS、建站主机

使用font-awesome字体图标库，让你的网站好看10倍相关推荐

Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
本地预览 @mdi/font Material Design Icons 字体图标库
目录知识前提 @mdi/font 字体图标库安装本地预览 @mdi/font 知识前提会使用 Node npm 命令安装库 @mdi/font 字体图标库安装进入项目目录,指定淘宝镜像源安装, ...
【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
超全超靠谱的 iconfont 字体图标库维护与使用
字体图标库的使用这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量 ...
Canvas 绘制字体图标库
1.首先,你要引入一个字体图标库 – iconfont 阿里的字体图标库将链接复制到浏览器,将获取到的css 代码复制到自己的项目代码中其他的不一一赘述,没有用过 iconfont 的可以看 ...
三分钟教会你自制 iconFont 字体图标库
app开发的时候,我们大多会用到字体icon,下面我们就讲解一下,如何自定义生成 iconFont 一般情况,我们优先选择在 Iconfont-阿里巴巴矢量图标库下载我们需要的矢量icon的svg格 ...
css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://ww ...

最新文章

热门文章