关于Font Awesome 浏览器不显示问题

最近需要用到Font Awesome图标，毕竟可以省很多事，也很方便。

这个是最新下载地址：http://fontawesome.dashgame.com/

下载后将文件夹解压，把css和fonts两个文件夹复制到项目中

将css文件夹中的两个文件中的

font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

url路径都改成fonts文件夹所在目录下。

在使用图标的页面中记得引入css

语法：<i class="fa fa-power-off"></i>   新版的 Font Awesome 复制标签后   在标签前加 fa 后跟标签使用。因为css中，是 .fa 这个样式才引用的字体。

如果浏览器不显示标签，查看自己的css路径有没有写错，如果没有错误的话，那就查看web.xml有没有做css+js拦截处理。

添加css+js拦截处理。

<servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.js</url-pattern>
</servlet-mapping>    
<servlet-mapping>        
 <servlet-name>default</servlet-name>
 <url-pattern>*.css</url-pattern>
</servlet-mapping>

servlet-mapping用来截获请求的，加载请求时拦截资源/路径，如js、css、图片等静态资源，没有添加截获请求，那加载页面的时候无法处理静态资源文件，所以造成  Font Awesome 加载不出来的问题。