vue 中使用iconfont Unicode編碼線上字體圖標的流程
阿新 • • 發佈:2018-07-09
style 需要 align sed 線上 important 復制 鋸齒 set
1.打開http://www.iconfont.cn官網,搜索你想要的圖標。添加字體圖標到購物車,點擊購物車然後添加至項目,點擊確定
2.點擊圖標管理/我的項目,找到對應的文件,點擊Unicode,然後生成在線鏈接
3.新建iconfont.css文件,把在線生成的代碼粘貼復制進去即可
4.定義使用iconfont樣式,把下面代碼復制到iconfont.css裏面
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased;/*字體清除鋸齒效果*/ -webkit-text-stroke-width: 0.2px;/*文本外邊框大小*/ -moz-osx-font-smoothing: grayscale;}
5.在HTML中需要使用到圖標時,使用iconfont類名。並在Footer.vue 中引入css文件 `import ‘@/assets/css/iconfont.css‘
<i class="iconfont"></i> <!--裏面寫上你想用的圖標下面的Unicode-->
vue 中使用iconfont Unicode編碼線上字體圖標的流程