使用element-ui的图标。但是不用class的方式而是伪类content里来定义

首先我们想使用这个图标

<i class="el-icon-check"></i>

 

<ul>

  <li class="icon">导入</li>

 <li>讲授</li>

</ul>

但是我希望在一个选中的前面就有个对号。但是不想用<i class="el-icon-check"></i>的显示隐藏来表示。我希望直接在文字前面加content的方式。输入法有个√。我们可以写

icon:before{content:'√';position: absolute;left: -8px;top: 14px;}。

但是这个和我们想要的效果有点差距。这个对勾不太好看。

 

然后我利用https://blog.csdn/qq_33769914/article/details/88395686这篇文章提到的方式找到那个check的对勾对应的content值。.el-icon-check:before{content:"\E611"}

然后发现变成这样没有识别出来。

这里注意啦。我们一定要标注

.icon:before {
        content: '\E611';
        position: absolute;
        left: -8px;
        top: 14px;
        font-family:element-icons!important;
    }