Vue.js结合css3图标字体的简单实现-原创手记-慕课网

vue.js部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>电力系统iconfont</title>
   <link rel="stylesheet" href="iconfont.css">
</head>

<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear" id="iconFonts">
            <li v-for='(key,icon) in icons'>
                <i class="{{icon.imageUri}}"></i>
                <div>{{key+":"}}{{icon.name}}</div>
            </li>
        </ul>
    </div>
</body>
 <script src='vue.js'></script>
 <script>
    var iconFonts=new Vue({
        el:"#iconFonts ",
        data:{
            icons:[{
                id:"",
                name:"柱上变压器",
                imageUri:"icon-rec-x x"
            },{
                id:"",
                name:"低压导线",
                imageUri:"icon-l-solid"
            },{
                id:"",
                name:"杆塔（低压）",
                imageUri:"icon-trg-db"
            },{
                id:"",
                name:"杆塔（高低压同杆）",
                imageUri:"icon-circle-hole"
            },{
                id:"",
                name:"低压无功补偿装置",
                imageUri:"icon-rec bc"
            },{
                id:"",
                name:"低压熔丝箱",
                imageUri:"icon-rec r"
            },{
                id:"",
                name:"低压墙支架",
                imageUri:"icon-trg-zj"
            },{
                id:"",
                name:"用户接入点",
                imageUri:"icon-circle-solid"
            },{
                id:"",
                name:"低压电缆段",
                imageUri:"icon-l-dashed"
            },{
                id:"",
                name:"低压电缆终端",
                imageUri:"icon-rec zd"
            },{
                id:"",
                name:"低压电缆接头",
                imageUri:"icon-rec-rotate"
            },{
                id:"",
                name:"配电站房",
                imageUri:"icon-rec pd"
            },{
                id:"",
                name:"箱式变电站",
                imageUri:"icon-rec xb"
            },{
                id:"",
                name:"低压配电箱",
                imageUri:"icon-rec dp"
            },{
                id:"",
                name:"低压电缆分支箱",
                imageUri:"icon-rec f"
            }]
        }
    })
 </script>
</html>

**css部分***

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}
body,
button, input, select, textarea /* for ie */ {
  font: 12px/1.5 tahoma, arial, \5b8b\4f53, 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);
}