note

Although the FA download package has a bunch of files, the easiest thing to do is to reference all.js, just this one file. If you refer to all.css, you may need to rely on other things.Copy the code

Font Awesome (FA for short) is a set of icon libraries with these nice features:

  1. In addition to allowing users to choose from more than 1,000 high-quality ICONS
  2. Infinite scaling. How to use the same font icon, specify the size of the icon, do not worry about the problem of deformation after enlarging the icon
  3. You can specify colors, background colors, just like fonts

In fact, technically, this set of ICONS is no longer a set of pictures, but a set of fonts, which are used as text.

Begin to use

In the simplest case, you can use CSS to add ICONS to HTML:

< link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <nav> <i class="fa fa-heart"></i> </nav>Copy the code

You can see the effect, that is, a heart-shaped icon appears to the left of the button. If you want to display an icon separately, you typically do this with the < I > tag:

<i class="fa fa-heart"></i>
Copy the code

But isn’t the < I > set for italics? Yes, today’s situation, the exterior are used to use CSS to finished, before I tag as a named style, it is very lonely, in fact, in most cases, although the tags still can default Settings inside text in italics, but everyone not in use, the label has been abandoned, not just here to enable it. In fact, many tabs can be used to display ICONS, such as the B TAB. So use I, because it can also be short for Icon.

Let’s see if we specify color and background color size:

<i class="fa fa-heart" style="color:red; background: blue; font-size: 3rem"></i>Copy the code

Yes, it can specify these three properties just like a font. As many as you want!

In the following code, italics and bold for the I and B tags are still available, but with class set, the actual appearance is controlled by CSS:

<nav>
  <i>I am Italic</i>
  <b>I am Bold</b>
  <i class="fa fa-heart"></i>
  <b class="fa fa-heart"></b>
</nav>
Copy the code

Another use is the option of using SVG, where FA is just the font icon in SVG, because SVG is vector graphics and therefore still has the feature of infinite scaling.

< script defer SRC = "https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script> <nav> <i class="fa fa-heart" style="color:red; background: blue; font-size: 3rem"></i> </nav>Copy the code

You will notice that the file referenced with SVG has changed from CSS to JS, and when you open the file you will still be able to display the heart icon, but when you look at the element composition you will see that the I tag has been replaced with an SVG tag, which contains the SVG instructions for drawing vectors.

What’s in the FA kit

The FA suite can be downloaded from this address:

https://use.fontawesome.com/releases/v5.1.0/fontawesome-free-5.1.0-web.zip
Copy the code

As follows:

LICENSE.txt	js		metadata	sprites		webfonts
css		less		scss		svgs
Copy the code

Let’s see what these directories are for:

  1. The all.css we use is in the CSS directory, and there are other files in this directory, but we don’t care about them for now.
  2. The all.js file we use is in the js directory, other files are not concerned about for the time being.
  3. The WebFonts directory places fonts in various formats, all the font ICONS are there, there are a lot of standards for fonts, but in terms of usage, we don’t have to worry about it, because these font files are used by CSS, we just need to refer to CSS and make sure that all the files in this directory are there.
  4. The SVGS file is the source of the font icon library that we use in SVG, but it is also used in all.js, so we won’t worry about the details for now. If you are interested in SVG, go to this directory and open the files in your browser. The browser will open the files and display the corresponding vector graphics. You can also use a file editing tool to open SVG files, which are just XML files and are text, so you can open and read them directly.
  5. The sprites directory packages all needed SVG into a single file to optimize performance over HTTP, where a large file is more efficient than several small files separated.
  6. Less and SCSS are CSS source files that can be used to generate CSS files

Use the original font directly

We can use FA with CSS or SVG+JS, but we can also use font files directly, as long as we know the font code in the file, we can use it directly.

For the following example, we use the WOFF font:

<style>
	.fa.fa-bars {
		font-size: 28px	;
		color:red;
		background: blue;
	}
	@font-face {
	font-family: FA;
	src: 
	url("./fonts/fontawesome-webfont.woff") format("woff");
	}
	.mytextwithicon {
    position:relative;
	}    
	.mytextwithicon:before {
		content: "\f0c9";  
	    font-family: FA;
	    font-size: 18px;
	    left:-5px;
	    position:absolute;
	    top:0;
	 }
</style>
<span class = "mytextwithicon"></span><br/>
<i class = "mytextwithicon"></i>
Copy the code

First declare a font name, such as FA, with @font-face, and then specify the font filename via the URL. Then use the FA font wherever you need it, just like any other font like Sans, Rome, etc. We specify in MyTextwithIcon that it will add an icon before the constraint element. The icon code is “\f0c9”, which stands for a bars icon. Code and icon comparison table, need to see the corresponding font file description.

Methods embedded into the Custom Element

If the FA can be embedded within an HTML Custom Element, it means that you can do Custom icon controls. This is very good componentized programming, but it is slightly special that using Custom Elements means using Shadow DOM. CSS files introduced in HTML will not affect the Shadow DOM. If desired, this can happen, for example by importing again in the Shadow DOM. The practice is as follows:

<link rel="stylesheet" href=".. /font/css/font-awesome.min.css"> <template id="r-demo"> <style> @import url(".. /font/css/font-awesome.min.css") </style> <nav> Icon:<button class="fa fa-search">Click Me! </button> </nav> </template> <script type="text/javascript"> var importDoc = document.currentScript.ownerDocument; var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = importDoc.querySelector("#r-demo"); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); }}}); document.registerElement("r-demo", {prototype: proto}); </script> <r-demo></r-demo>Copy the code

The key here is:

@import url(".. /font/css/font-awesome.min.css")Copy the code

Somewhat surprisingly introduced twice, both are the same file.