vue a标签_vue实战开发009:伪元素中如何引用字体图标

前面我们有说到如何使用Font Awesome字体图标： vue实战开发008:引入Font Awesome字体图标，在我们使用vue时通常不会把数据写死，而是定义一个数据列表，再通过遍历来获取相应的数据，这里我们模仿2345影视写了点内容，下面的版权声明我都是直接定义的数据列表再遍历展示的。

我们可以看到在 上海市互联网违法和不良信息举报中心前面有个Window的图标(我随意放的)，这是个字体图标，正常情况下我们使用Font Awesome字体图标可以直接在a标签中嵌套一个即可。

但是我们现在的a标签是通过vue进行列表遍历生成的，内容和个数随数据动态生成的，在代码中我们没法查看到对应的a标签并添加我们的字体图标，如图中所示：

这时我我们就要用到伪元素了，动态添加我们想要的内容，比如说留言板这行，后面的“|”就是后期通过伪元素添加的，我在a标签后面动态添加了一个“|”，但是这样添加的之后我们可以发现，最后一个数据后面也出现了一个“|”所以这里我们要再添加一个样式，把最后一个元素后面的伪元素隐藏起来。

.affirming a::after{

content:"|" /*伪元素添加"|"*/

}

.affirming a:last-child::after{

display: none; /*隐藏最后一个伪元素*/

}

同样的道理，现在我们要为最后一个元素添加字体图标，我们同样要用到伪元素来操作，通过伪元素我动态给a标签添加到元素中去，一开始我想着直接在最后一个元素中添加或许可以实现，但是发现前台没法显示该元素，因为伪元素就是以标签的形式添加的，而我这添加的是个标签，中间的“fa fa-windows“已经被双引号给隔断了，并不是一个整体，所以连内容都无法显示。

这里我们可以以字体编码的形式来添加字体图标，在伪元素中定义字体类型和对应的字体编码就可以把对应的字体图标给添加进元素中了：Font Awesome 官方图标字体的代码列表，大家可以根据这个来查找自己想要的字体图标，找到对应的图标，后面括号中的代码就是字体编码，如第一个 icon-glass ()，我们只要提取f000，然后加上“”放入content中即：content:"f000" ;

这样我们就可以通过伪元素的形式来添加字体图标了，当然如果你觉得麻烦也可以直接在HTML中来添加，这样我们就要用到判断了，我们提前在a标签中写好一个i标签，当它到最后一个元素的时候才显示，这里我用v-if来判断，当index等于列表最后一个元素时显示该字体图标，这个比伪元素简单点，不用再去找对应的字体编码。