前端小白，看到别人用，这是怎么回事？

Question

在font awesome里面没有这个呀？而且fa里面不是说用标签“i“来使用fa的图标吗？
关于arrow，fa里面有：
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrow-circle-right 等等，
请问<span class='fa arrow'></span>这是怎么回事？如果能给出源资料链接那就太感激了。

Answer 1

span标签 和i标签都一样用 都是行内标签吧 你可以试下就知道了

Answer 2

恩，谢谢你们哦。
通过你们的提示信息，我找到了metismenu.css里面有：

.fa.arrow:before {
  content: "\f104";
}
和
.metismenu .arrow {
  float: right;
  line-height: 1.42857;
}`请输入代码`

其中'/f104'是fontawesome图标"<"，即fa-angle-left
然后附上我的源码：

的确如@Pstbird所言，不是font awesome的css里面定义，而是在metismenu.css里面定义的。
我尝试过line40<ul class="nav metismenu">里的metismenu删除，然后所有的"<"符号都没有了，请问大家这又是为啥？
“<"符号不是在fa arrow里面定义的吗？即使我去掉line40里的metismenu只要添加了metismenu.css按道理也应该能用呀~

Answer 3

第一个问题：

fontawesome 只是一套css样式，你把fa-arrow-circle-down改个名字,改成arrow,就可以直接使用class= "fa arrow" 的形式来使用。

这个arrow也可能是自己定义的一个箭头样式，font-awesome本身是没有这个class，但是可以修改或者自己定义一个的。

第二个问题：

<i> 只是随便一个html标签，平时用的比较少，因此font-awesome会推荐使用。

本质还是使用css来控制html标签的显示样式，所以标签是无所谓的。

因此下面是一样的效果：

    <i class="fa fa-arrow-left"></i>
    <span class="fa fa-arrow-left"></span>
    <b class="fa fa-arrow-left"></b>
    <strong class="fa fa-arrow-left"></strong>
    <div class="fa fa-arrow-left"></div>

即使div这样的块级标签一样的渲染效果，因为fa已经定义了标签的形式：

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Answer 4

看一眼 font awesome 提供的 css 文件就明白了。
里面提供了一系列的样式，只要有的样式都能用。