在网站上如何使用Font Awesom图标

本文介绍在网站上如何使用Font Awesom图标。

通常给我们的导航栏上加上一个图标,既直观又美观,像这样的:

那么该怎么设置呢?

可以直接引用,代码可以这样写:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"  integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

但是这样有一个问题是加载会比较慢,为了提高速度可以直接把文件下载下来,放到自己的网站里,比如版本5.8.2。

下载地址:

https://use.fontawesome.com/releases/v5.8.2/fontawesome-free-5.8.2-web.zip

下载速度会比较慢,这也是需要放在自己网站的原因。

网页上用的话,只需要两个文件夹及里面的文件就可以了:css与webfonts,并且保证这两个文件在同一个文件夹里。

引用方法:在<head>与</head>之间加上:

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

使用方法:

<i class="fas fa-user"></i>

常见的方法是:

<li id="nvabar-item-index"><a href="https://www.xuzai.com/"><i class="fa fa-home"></i>&nbsp;首页</a></li>

需要什么样的图标直接在网站上查找,地址是:

https://fontawesome.com/icons

 

建站

建立自己的导航网站

2021-6-11 20:06:13

建站

通过NextCloud搭建私人网盘-最全实用教程

2021-6-16 22:22:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索