Question

如何应用Font Awesome矢量字体图标

Answer 1

/* Font-face 首先第一步设置调用fontawesome的路径
============================================================================= */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Component 设置调用的默认大小
============================================================================= */
[class*="am-icon-"] {
  display: inline-block;
}
[class*="am-icon-"]:before {
  display: inline-block;
  font: normal normal normal 1.6rem/1 "FontAwesome", sans-serif;
  /*font-weight: normal; // 2
  font-style: normal; // 2
  vertical-align: baseline; // 3
  line-height: 1; // 4*/
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
/* Icon mapping 第三部配置content，content里面的代码就是具体的fontawesome图标了
============================================================================= */
.am-icon-glass:before {
  content: "\f000";
}
.am-icon-music:before {
  content: "\f001";
}
.am-icon-search:before {
  content: "\f002";
}
.am-icon-envelope-o:before {
  content: "\f003";
}
.am-icon-heart:before {
  content: "\f004";
}
.am-icon-star:before {
  content: "\f005";
}
.am-icon-star-o:before {
  content: "\f006";
}
.am-icon-user:before {
  content: "\f007";
}
.am-icon-film:before {
  content: "\f008";
}
.am-icon-th-large:before {
  content: "\f009";
}
.am-icon-th:before {
  content: "\f00a";
}
.am-icon-th-list:before {
  content: "\f00b";
}
.am-icon-check:before {
  content: "\f00c";
}
.am-icon-remove:before,
.am-icon-close:before,
.am-icon-times:before {
  content: "\f00d";
}
.am-icon-search-plus:before {
  content: "\f00e";
}
.am-icon-search-minus:before {
  content: "\f010";
}
.am-icon-power-off:before {
  content: "\f011";
}
.am-icon-signal:before {
  content: "\f012";
}
.am-icon-gear:before,
.am-icon-cog:before {
  content: "\f013";
}
.am-icon-trash-o:before {
  content: "\f014";
}
.am-icon-home:before {
  content: "\f015";
}
.am-icon-file-o:before {
  content: "\f016";
}
.am-icon-clock-o:before {
  content: "\f017";
}
.am-icon-road:before {
  content: "\f018";
}
.am-icon-download:before {
  content: "\f019";
}
.am-icon-arrow-circle-o-down:before {
  content: "\f01a";
}
.am-icon-arrow-circle-o-up:before {
  content: "\f01b";
}
.am-icon-inbox:before {
  content: "\f01c";
}
.am-icon-play-circle-o:before {
  content: "\f01d";
}
.am-icon-rotate-right:before,
.am-icon-repeat:before {
  content: "\f01e";
}
.am-icon-refresh:before {
  content: "\f021";
}
.am-icon-list-alt:before {
  content: "\f022";
}
.am-icon-lock:before {
  content: "\f023";
}
.am-icon-flag:before {
  content: "\f024";
}

如下是展示的效果：

上fontawesome的官网下载相关的文件，那里也有例子说明的，说白了，这个fontawesome就是他们制作好的svg矢量图，然后通过content代码获取到相应的矢量图，在页面上展示，因为是矢量图，而且材料很丰富，所以很受欢迎。

给你发下我目录结构：