在本地保存 CDN CSS 资源的最简单方法？

Question

我正在开发服务器上本地处理引导模板。模板通过 CDN 加载一些资源。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--font-awesome-->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />

问题是这让我放慢了速度，因为每次我点击刷新以检查我的页面（本地主机）上的更改时，该死的东西必须一次又一次地在线加载资源..

所以我尝试通过链接打开资源并将它们保存在本地。但这会中断，因为我想它不仅仅是 CSS 代码。

有没有简单的方法来“本地化”这些东西？

谢谢大家

Answer 1

这是我在本地使用 CDN CSS 资源的步骤：

1. 从here下载并提取字体包
2. 将 ionicons.css 复制到您的项目中
3. 将 fonts 文件夹复制到您的项目中
4. 确保 ionicons.css 中的字体 URL 正确引用了项目中的字体路径。
5. 在您需要使用的每个网页中包含对 ionicons.css 文件的引用。

在我的例子中，我将它包含在 main.html 中

<link href="css/ionicons.css" rel="stylesheet" type="text/css" />

然后只需将图标和图标的类名添加到 HTML 元素。

<i class="icon ion-home"></i>

和文件夹是这样的：

- project_name
    * css    --> ionicons.css
    * fonts  --> ionicons.eot, ionicons.svg, ionicons.ttf, ionicons.woff

Answer 2

作为这个答案的序言，我不确定这个解决方案是否被认为是“简单的”，但它会让您能够在本地托管而不是依赖于 CDN。简单的解决方案是使用 CDN。话虽这么说：

bootstrap.min.css 文件易于本地化，您可以访问 getbootstrap.com 并从 Download Bootstrap 选项中获取它。

本地化 Font Awesome 需要更多的工作。在这里，您需要将整个 font-awesome 目录复制到您的项目中。您可以从这个 URL 下载它：http://fortawesome.github.io/Font-Awesome/。您最终会得到一个名为 font-awesome-4.2.0 的目录文件夹，其中包含一系列子文件夹：css、fonts、less 和 scss。您还需要在 HTML 的 head 部分调用本地 font-awesome.min.css 文件。有关在本地设置 Font Awesome 的更多信息，请参阅以下 GitHub 链接：http://fortawesome.github.io/Font-Awesome/get-started/

Ionicons 类似于 Font Awesome 设置。从以下 Ionicons 网页，您需要下载该目录并将其包含在您的项目中：http://ionicons.com/。设置好目录后，您需要在 HTML 的 head 部分调用本地 ionicons.min.css 文件。

Answer 3

老问题，但我认为现在有一个简单的解决方案： 您可以使用npm install ionicons安装节点包

https://www.npmjs.com/package/ionicons

Answer 4

从 url 本地保存 css/js 文件并更改路径。

例如：- css/ionicons.min.css

http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css