Vue.js结合css3图标字体的简单实现

vue.js部分

    
    
   



    
 IconFont 图标
 

     

  
  {{key+":"}}{{icon.name}}
     
 
    

 
 

**css部分***

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
dl, dt, dd, ul, ol, li, 
pre, 
form, fieldset, legend, button, input, textarea, 
th, td  {
  margin: 0;
  padding: 0;
}
body,
button, input, select, textarea  {
  font: 12px/1.5 tahoma, arial, 5b8b4f53, sans-serif;
}
ul>li i {
    display: inline-block;
}
ul, ol { list-style: none; }
.main {padding: 30px 100px;}
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
.icon_lists li{
  float:left;
  width: 100px;
  height:100px;
  text-align: center;
}
.icon-rec-x{
  position: relative;
    width: 32px;
    height: 30px;
    border: 1px solid black;
}
.icon-rec-x::after,::before{
  position: absolute;
  top:3px;
  font-size: 16px;
  font-style: normal;
  color: #000;
}
.x::after{
  content: '-O';
  left: 2px !important;
 } 
 .x::before{
  content: 'O-';
  right: 1px !important;
 } 
.icon-l-solid {
    border-top: 1px solid black;
    width: 30px;
}
.icon-l-dashed {
    border-top: 1px dashed black;
    width: 30px;
}

.icon-circle-solid {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #000;
}

.icon-circle-hole {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #000;
}

.icon-rec{
  position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid black;
}

.icon-rec::after{ 
  position: absolute;
  left: 5px;
  top:3px;
  font-size: 16px;
  font-style: normal;
  color: #000;}
.bc::after{content: 'BC'} 
.r::after{content: 'R';left: 9px;} 
.zd::after{content: 'ZD'} 
.pd::after{content: 'PD'} 
.xb:after{content: 'XB'} 
.dp:after{content: 'DP'} 
.f:after{content: 'F';left: 9px;} 
.icon-rec-rotate {
  position: relative;
  width:30px;
  height:30px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
  border: 1px solid #000;
}
.icon-rec-rotate::after{
  position: absolute;
  top:-11px;
  left: 19px;
  font-style: normal;
  font-size: 23px;
  content: "";
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}
.icon-rec-rotate::before{
  position: absolute;
  top:4px;
  left: 4px;
  font-style: normal;
  font-size: 23px;
  content: "";
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}
.icon-trg-db {
  position: relative;
  width: 27px;
  height: 30px;
  border-bottom:3px solid #000;
}
.icon-trg-db::after{
   position: absolute;
  top:-22px;
  left: -10px;
  font-style: normal;
  font-size: 53px;
  font-weight: 100;
  content: ">";
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transform:rotate(-90deg);
}
.icon-trg-zj {
    position: relative;
    width:40px;
    height: 22px;
    border-left: 3px solid #000;
    border-top: 3px solid #000;
}
.icon-trg-zj::after{
   position: absolute;
  top:-24px;
  left: 5px;
  font-style: normal;
  font-size: 48px;
  font-weight: 100;
  content: "";
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transform:rotate(-119deg);
}