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

Question

我正在我的开发服务器上本地开发一个 Bootstrap 模板。该模板通过 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