Hosting Font Awesome Yourself · Web软件技术栈随笔

[[官方文档]](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) Prefer to get a copy and use Font Awesome alongside your own project’s source code while building locally and serving in production? Downloading and hosting Font Awesome yourself is great for when you have many sites or apps in one codebase or want to customize parts of Font Awesome for your workflow. [TOC] ## Downloaded a copy of our for the web-specific files. What’s in the Download? The web-focused Font Awesome Package contains the following directories and files: | Files & Folders | What They Are | Where You Should Start | | --- | --- | --- | | `/css` | Stylesheets for Web Fonts | `all.css` | | `/js` | SVG with JavaScript | `all.js` | | `/less` | Less pre-processor | `fontawesome.less` | | `/scss` | Sass pre-processor | `fontawesome.scss` | | `/sprites` | SVG sprites | `solid.svg` | | `/svgs` | Individual SVG for each icon | individual`*.svg`icons | | `/webfonts` | Web Font files used with CSS | See`/css` | ### Using Web Fonts with CSS The`/css/all.css`file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The`/webfonts`folder contains all of the typeface files that the above CSS references and depends on. Copy the entire`/webfonts`folder and the`/css/all.css`into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff). Add a reference to the copied`/css/all.css`file into the`<head>`of each template or page that you want to use Font Awesome on. ~~~ html  <head> <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">  </head> <body> <i class="fas fa-user"></i>  <i class="far fa-user"></i>  <i class="fal fa-user"></i>   <i class="fab fa-github-square"></i>  </body> ~~~ ### Using SVG with JavaScript The`/js/all.js`loads the all of the base features, plus all of the icon styles that you’ll need when using Font Awesome. Copy it into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff). Add a reference to the copied`/js/all.js`file within the`<head>`of each template or page that you want to use Font Awesome on. ~~~ html  <head> <script defer src="/your-path-to-fontawesome/js/all.js"></script>  </head> <body> <i class="fas fa-user"></i>  <i class="far fa-user"></i>  <i class="fal fa-user"></i>   <i class="fab fa-github-square"></i>  </body> ~~~ ### Using Just Certain Styles #### **using Web Fonts with CSS framework** The`/css`folder contains the core styling and additional files for all of Font Awesome’s style options -[solid](https://fontawesome.com/icons?s=solid),[regular](https://fontawesome.com/icons?s=regular),[light](https://fontawesome.com/icons?s=light), and [brands](https://fontawesome.com/icons?s=brands). The`/webfonts`folder contains all of the typeface files that the above CSS references and depends on. | Icon Style | Web Font Filename | CSS Filename | Availability | | --- | --- | --- | --- | | [Font Awesome Brands](https://fontawesome.com/icons?s=brands) | `fa-brands-400.*` | `brands.css` | Free | | [Font Awesome Solid](https://fontawesome.com/icons?s=solid) | `fa-solid-900.*` | `solid.css` | Free | | [Font Awesome Regular](https://fontawesome.com/icons?s=regular) | `fa-regular-400.*` | `regular.css` | [Pro only](https://fontawesome.com/pro) | | [Font Awesome Light](https://fontawesome.com/icons?s=light) | `fa-light-300.*` | `light.css` | [Pro only](https://fontawesome.com/pro) | Copy both the`/webfonts`and the`/css`folders into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff). You can remove any styles’`.css`and web font files you don’t plan on using if you’d like. Add a reference to the core styling file (`/css/fontawesome.css`) and the CSS for individual styles (e.g.`/css/brands.css`) into the`<head>`of each template or page that you want to use Font Awesome on. Pay attention to the pathing of your project and where you moved the files to in the previous step. ~~~ html  <head>  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"> <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"> <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet"> </head> <body> <i class="fas fa-user"></i>  <i class="fab fa-github-square"></i>  </body> ~~~ #### **using SVG with JS framework** The`/js`folder contains the core styling and additional files for all of Font Awesome’s style options -[solid](https://fontawesome.com/icons?s=solid),[regular](https://fontawesome.com/icons?s=regular),[light](https://fontawesome.com/icons?s=light), and[brands](https://fontawesome.com/icons?s=brands). | Icon Style | JS Filename | Availability | | --- | --- | --- | | [Font Awesome Brands](https://fontawesome.com/icons?s=brands) | `brands.js` | Free | | [Font Awesome Solid](https://fontawesome.com/icons?s=solid) | `solid.js` | Free | | [Font Awesome Regular](https://fontawesome.com/icons?s=regular) | `regular.js` | [Pro only](https://fontawesome.com/pro) | | [Font Awesome Light](https://fontawesome.com/icons?s=light) | `light.js` | [Pro only](https://fontawesome.com/pro) | Copy the`fontawesome.js`loader and whatever icon styles’`.js`files you’d like to use into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff). We recommend referencing the`fontawesome.js`loader last. ~~~ html  <head>  <script defer src="/your-path-to-fontawesome/js/brands.js"></script> <script defer src="/your-path-to-fontawesome/js/solid.js"></script> <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script> </head> <body> <i class="fas fa-user"></i>  <i class="fab fa-github-square"></i>  </body> ~~~ ## Using a Package Manager With package managers like [npm](https://www.npmjs.com/) and [yarn](https://yarnpkg.com/), you can easily upgrade to newer versions of Font Awesome when they are released and better manage access to Pro packages. The Web-focused Font Awesome Package contains the following directories and files: | Path | What It Is | Where You Should Start | | --- | --- | --- | | `/css` | Stylesheets for Web Fonts | `all.css` | | `/js` | SVG with JavaScript | `all.js` | | `/less` | Less pre-processor | `fontawesome.less` | | `/scss` | Sass pre-processor | `fontawesome.scss` | | `/sprites` | SVG sprites | `solid.svg` | | `/svgs` | Individual SVG for each icon | individual`*.svg`icons | | `/webfonts` | Web Font files used with CSS | See`/css` | ### Installing the Free version of Font Awesome ~~~ javascipt $ npm install --save-dev @fortawesome/fontawesome-free ~~~ ~~~ javascipt $ yarn add --dev @fortawesome/fontawesome-free ~~~ ### Installing the Pro version of Font Awesome Access to the Pro packages, which contain more icons and styles, require you to configure the`@fortawesome`scope to use our Pro NPM registry. ### how to use the installed version of Font Awesome Reference either the`/css/all.css`or the`/js/all.js`, which contains everything you need to use Font Awesome in the`<head>`of each template or page that you want to use Font Awesome on. Be mindful of paths from where you installed the package from when doing so. If you would like to only use specific styles rather than the default`all`option we've included in our Web Fonts and SVG frameworks, reference the specific styles you want to use like`fa-brands`or`fa-regular`and then the loader`fontawesome`in place of`all`.