如何在 CSS 中离线使用字体真棒图标

编程问答 2022-05-31

问题描述

我想知道，如何在 CSS 中使用带有 :before 或 :after 伪字样的字体 awesome 的离线图标？ 如果我使用 CDN 而不是离线，那么它可以完美运行，但不能用于离线文件。

.mydiv::before {
    content: "\25AE";  
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

解决方法

如何设置取决于您的解决方案。您使用的是简单的 CSS 还是任何 CSS 预处理器？

假设您使用的是简单的 CSS：

  1. 下载并解压包
  2. 将两个文件夹：/webfonts 和 /css/all.css 复制到您项目的静态资产目录（或您希望保留前端资产的任何位置）。
  3. 将其链接到您需要的每个 HTML 页面的 head 标记中

像这样：

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

有关更多信息，请查看有关如何自行托管的官方指南：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

,

从 Font Awesome 网站下载所需文件 https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

  • 新建文件夹/fonts/
  • 将下载文件解压到此文件夹中。
  • 然后在 <link href="fonts/css/all.css" rel="stylesheet"> 部分添加 <head>。

在您的网页中使用它们很容易，示例参见 https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

font-awesomewebfonts