font-awesome库的官网地址： http://fontawesome.io/
font-awesome里面还有个fonts文件夹，你要把字体文件放到对应的位置；或者放入一个任意的位置，然后修改font-awsome.css里面url地址。

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

font-awesome及其类似icon库的工作原理：
在css定义一些类似这样的样式：

.fa-cog:before {
  content: "\f013";
  font: FontAweSome;
}

f013是一个一般字体里不存在的字符，对这个字符应用FontAweSome这个字体，而这个字体里面有这个图标的描述。以达成了想要的效果。
出现方块的原因就是FontAweSome字体没有加载成功。