Dreaminko

梦墨不会做梦💤

twitter
telegram
mastodon

为网页添加FontAwesome支持

Font Awesome 是一个基于 CSS 和 LESS 的字体和图标工具包。它由 Dave Gandy 制作,用于 Twitter Bootstrap,后来被集成到 BootstrapCDN 中。Font Awesome 在使用第三方 Font Scripts 的网站中占有 20%的市场份额,排在 Google 字体之后的第二位。
—— Wikipedia

首先前往 FontAwesome 官网下载工具包:https://fontawesome.com/download

下载 Free For Web 版本,将下载下来的压缩包解压后得到所有需要的文件。

在网站根目录下新建/assets文件夹,并在该文件夹下建立/css/webfonts文件夹。

将解压得到的/fontawesome-free-6.2.0-web/css文件夹中的fontawesome.cssbrands.csssolid.css复制至/assets/css

将解压得到的/fontawesome-free-6.2.0-web/webfonts文件夹中的fa-brands-400.woff2fa-brands-400.ttffa-solid-900.woff2fa-solid-900.ttf复制至/assets/webfonts

如果你想自己选择目录放置这些文件,请注意修改brands.csssolid.css中的字体引用路径

index.html中的<head>标签内引用:

 <link href="./assets/css/fontawesome.css" rel="stylesheet">
 <link href="./assets/css/brands.css" rel="stylesheet">
 <link href="./assets/css/solid.css" rel="stylesheet">

之后便可在网页内使用<i>标签直接引用图标,Enjoy!
有关于引用图标的几种方式,请自行查阅官方文档

查询图标:https://fontawesome.com/search
官方文档:https://fontawesome.com/docs
官方教程:https://fontawesome.com/docs/web/setup/host-yourself/webfonts

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。