easiest way to save CDN CSS resource locally?

Question

i'm working on a bootstrap template locally on my dev server.. the template loads some resources via 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" />

Problem is this slows me down because everytime I hit refresh to check the changes on my page (localhost) the darn thing has to load the resources online again and again..

So i tried to open the resources via the link and save em locally. but this breaks because i guess there are more things to it than just the CSS code.

Is there an easy way to "localize" these things?

Thanks guys

Answer 1

This are the steps I followed to use CDN CSS resource locally:

1. Download and extract the font pack from here
2. Copy the ionicons.css to your project
3. Copy the fonts folder to your project
4. Ensure the font urls within ionicons.css properly reference the fonts path within your project.
5. Include a reference to the ionicons.css file from every webpage you need to use it.

In my case I include this in main.html

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

then simply add the icon and icon's classname to an HTML element.

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

and folders are in this way:

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

Answer 2

To preface this answer, I'm not sure that this solution is considered 'easy' but it will get you the ability to host locally vs. being dependent on the CDNs. The easy solution is using the CDNs. That being said:

The bootstrap.min.css file is easy to localize, you can go to getbootstrap.com and get it out of the Download Bootstrap option.

Localizing Font Awesome is a bit more work. Here you need to copy the entire font-awesome directory into your project. You can download it from this URL: http://fortawesome.github.io/Font-Awesome/ . You'll end up with a directory folder named something like font-awesome-4.2.0, which will contain a series of sub-folders: css, fonts, less and scss. You'll also need to call the local font-awesome.min.css file in the head section of your HTML. See the following GitHub link for more information on setting up Font Awesome locally: http://fortawesome.github.io/Font-Awesome/get-started/

Ionicons is similar to Font Awesome setup. From the following Ionicons web page, you'll need to Download the directory and include it in your project: http://ionicons.com/ . You'll need to call the local ionicons.min.css file in the head section of your HTML after you have the directory setup.