离线字体真棒图标

Posted

技术标签:

【中文标题】离线字体真棒图标【英文标题】：Font Awesome Icons in Offline 【发布时间】：2018-09-08 01:17:44 【问题描述】：

有什么办法可以离线使用吗？

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

我复制链接并保存为 font-awesome.min.css 但它仍然不能像这个链接那样离线工作 href="css/font-awesome.min.css" rel="stylesheet" type="text /css"

【问题讨论】：

将 font-awesome.min.css 保存到您的项目目录，并将该路径称为 href 我使用了 font-awesome.min.css 但它只是方形显示 清除缓存并检查。否则你可能会给出错误的路径 使用此链接下载https://use.fontawesome.com/releases/v5.0.9/fontawesome-free-5.0.9.zip 【参考方案1】：

按“免费下载”按钮并确保您也拥有网络字体。下载的 zip 中有一个 web-fonts-with-css 文件夹。复制项目中的字体并修改 CSS 中字体的路径以指向 webfonts 的位置。

如果您打开问题中链接的 CSS，您会看到它们有一些导入

url('../fonts/fontawesome-webfont.woff2?v=4.7.0')

用下载字体的位置修改这些。

【讨论】：

我将链接复制并粘贴到 url cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/… 但我看不到免费下载先生 只需复制并粘贴到新文件并引用该文件 有两个eot文件，我要链接哪个？ fa-solid-900.eot 和 fa-regular -400.eot 我还是不明白，先生，我应该全部替换吗？包括 ?v=4.7.0 ?v=4.7 用于缓存字体，我暂时不考虑它，只使用文件名。【参考方案2】：
    从官方网站下载字体 awesome free zip 有一个名为“css”的文件夹，将该文件夹复制到您的项目文件夹中，（重要）并复制名为“webfonts”的文件夹 然后使用命令将所需的 css 文件链接到 html 文件（all.css 或 fontawesome.css 或 fontawesome.min.css） 然后试试你的代码，它会工作的

【讨论】：

【参考方案3】：

Fontawesome 网站本身记录了如何在此处离线下载和使用图标套件：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

【讨论】：

【参考方案4】：

这里为您提供全方位的解决方案：

    下载FontAwesome ZIP file 在您的public_html（或您的根文件夹）上创建一个assets 文件夹 将font-awesome-4.7.0的所有内容解压到您的assets文件夹中 编辑您的 HTML 文件 head 标签并添加以下代码（即在所有 meta 标签之后）：

&lt;link rel="stylesheet" href="./assets/css/font-awesome.min.css"&gt;

【讨论】：

【参考方案5】：

您需要这些文件的正确版本。 假设您只需要 4.7.0 版的字体和 css。

DOWNLOAD

    将 fontawesome.css 移动到您的主目录并将其包含在您的 html 文件中： 
<link rel='stylesheet' href='./fontawesome.css'>
    创建一个名为 fonts 的子文件夹并将字体（eot、woff2、svg、ttf）放在那里。

就是这样。

注意事项： fontawesome.css 中的当前字体路径是：

src:url('./fonts/fontawesome-webfont.eot?v=4.7.0');src:url('./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('./fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('./fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('./fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');

您可以将它们移动到您喜欢的任何地方，但请确保更正路径。

【讨论】：

【参考方案6】：

以上解决方案都不适合我， 但我最近在 fontawesome 的网站上找到了一个解决方案，它很简单，效果很好，我认为值得分享。 这里是：

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> 
<!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

如您所见，它导入了 all.css 文件

【讨论】：

【参考方案7】：

您想要的信息在下面的链接中也为使用图标必须使用JS和CSS来显示图标。上面只是说使用 CSS，但对于使用图标，js 和 CSS 都需要！ https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

以上链接是问题的完整来源，而 Blow 是如何添加代码 你的项目。对于使用图标，您使用下面的代码。 在下面的 Code Image Just Click On it ^-^ ，我添加了 CSS 和 javascript 文件， 从 https://use.fontawesome.com/releases/v5.15.4/fontawesome-free-5.15.4-web.zip 下载文件，最好在 CSS 文件旁边添加文件夹 WebFonts , 我添加的文件，在 CSS 文件夹和 js 文件夹中

Code Image

&lt;link rel="stylesheet" href="fontawesome.min.css"&gt;

&lt;script src="all.min.js"&gt;&lt;/script&gt;

正如我所说，不要只是添加 CSS 文件，还要添加其他文件取决于您的项目！ , 但是 CSS 和 Js 是必须的。

希望对你有帮助

【讨论】：

即使链接可以回答，感谢edit，您能否在帖子中解释并包含大部分答案？ 好的！我会编辑它

以上是关于离线字体真棒图标的主要内容，如果未能解决你的问题，请参考以下文章

jqGrid：字体真棒图标

字体真棒显示方形而不是图标

为字体真棒图标设置固定尺寸

构建字体真棒图标

React 字体真棒图标在生产中更大

如何减小字体真棒图标的大小？