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

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

    咱们能够看到在 上海市互联网违法和不良信息举报中心前面有个Window的图标（我随意放的），这是个字体图标，正常状况下咱们使用Font Awesome字体图标能够直接在a标签中嵌套一个<i class="fa fa-windows"></i>便可。windows

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

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

.affirming a::after{
    content:"|"     /*伪元素添加"|"*/
}
.affirming a:last-child::after{
    display: none;  /*隐藏最后一个伪元素*/
}

 一样的道理，如今咱们要为最后一个元素添加字体图标，咱们一样要用到伪元素来操做，经过伪元素我动态给a标签添加到元素中去，一开始我想着直接在最后一个元素中添加<i class="fa fa-windows"></i>或许能够实现，可是发现前台无法显示该元素，由于伪元素就是以标签的形式添加的，而我这添加的是个标签，中间的“fa fa-windows“已经被双引号给隔断了，并非一个总体，因此连内容都没法显示。编码

 这里咱们能够以字体编码的形式来添加字体图标，在伪元素中定义字体类型和对应的字体编码就能够把对应的字体图标给添加进元素中了：Font Awesome 官方图标字体的代码列表，你们能够根据这个来查找本身想要的字体图标，找到对应的图标，后面括号中的代码就是字体编码，如第一个 icon-glass (&#xf000;)，咱们只要提取f000，而后加上“\”放入content中即：content:"\f000" ;spa

.equity a:last-child:before{
    font-family:'FontAwesome'; /*字体*/
    content:"\f17a" ; /*字体图标编码*/
    font-size:18px 
}

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