离线字体真棒图标

Question

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

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

我复制了 link 并另存为 font-awesome.min.css 但它仍然无法像这样离线工作 link href="css/font-awesome.min.css" rel="stylesheet"类型="text/css"

Answer 1

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

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

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

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

Answer 2

从官方网站下载 font awesome free zip
有一个名为 'css' 的文件夹，将该文件夹复制到您的项目文件夹中（重要），同时复制名为 'webfonts'
然后 link 使用命令 [=] 将所需的 css 文件转换为 html 文件（all.css 或 fontawesome.css 或 fontawesome.min.css） 15=]
然后试试你的代码，它会工作

Answer 3

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

Answer 4

这里有适合您的全方位解决方案：

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

<link rel="stylesheet" href="./assets/css/font-awesome.min.css">

Answer 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');

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

Answer 6

none 以上解决方案对我有用，但我最近在 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 文件

Answer 7

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

以上 Link 是问题的完整来源，Blow 是如何添加代码你的项目。对于使用图标，您使用下面的代码。在下面的 { 代码图像 }{ 只需点击它 ^-^ }，我添加了 CSS 和 JavaScript 文件，从 { https://use.fontawesome.com/releases/v5.15.4/fontawesome-free-5.15.4-web.zip } 下载文件，最好在 CSS 文件旁边添加文件夹 WebFonts ，我添加的文件，在CSS文件夹和js文件夹

Code Image

<link rel="stylesheet" href="fontawesome.min.css">

<script src="all.min.js"></script>

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

希望对您有所帮助

离线字体真棒图标

Font Awesome Icons in Offline

html

css

cdn

font-awesome

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