• 人生的价值,并不是用时间,而是用深度量去衡量的。 —列夫·托尔斯泰

  • 别在意别人的看法,你是谁只有你自己说了才算!-《哪吒之魔童降世》

  • 任何时候能够真正把你从深渊拉上来的只有你自己!-《肖申克的救赎》

  • 欢迎光临!

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

主题 WIZ 1年前 (2019-12-01) 826次浏览 8个评论

本文介绍在网站上如何使用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://wiz.ren/”><i class=”fa fa-home”></i>&nbsp;首页</a></li>

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

https://fontawesome.com/icons


为知人 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在网站上如何使用Font Awesom图标
喜欢 (36)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 好方法!!!
    鹅鹅鹅2019-12-03 00:17 回复
  2. 很不错的图标的了
    百度seo优化2019-12-03 15:50 回复
  3. 这个教程不错!
    李峰博客2019-12-03 17:20 回复
  4. 这种ICON的小图标在网页中很常用呀,好资源。
    夏日博客2019-12-03 18:03 回复
    • 是的,增加后一目了然。
      WIZ2019-12-07 11:08 回复
  5. 无条件收录各类优秀正规站,希望能多个做网站的朋友!
    首码网2019-12-04 10:50 回复
  6. 交换链接吗
    乐在猫2019-12-05 13:36 回复
  7. 好文章,学习一下
    股吧2019-12-06 18:05 回复