一、使用
1. 打開 http://www.iconfont.cn/
2. 將圖標加入購物車
3. 點擊下載代碼 => github登錄(Sign in)=> 解壓下載的文件夾 => 將文件夾復制到 assets文件夾中
icon.png
4. 在用到圖標的組件中寫: (將demo_fontclass.html在瀏覽器中打開即可看到具體操作)
<i class='iconfont icon-gouwuche'></i>
兩個class名
第一個為iconfont.css中的class名 即 .iconfont
第二個為將demo_fontclass.html在瀏覽器中打開時圖標下面的class名
class.png
icon_name.png
<style>
@import '../assets/icon/iconfont.css'; // 引用 iconfont.css
</style>
二、引入彩色圖片(Symbol用法)
1、選擇圖片,加入購物車,點擊“下載代碼”
第一步
2、取出壓縮文件中的iconfont.js
第二步
3、放到vue項目下,/public/static/js/iconfont.js目錄下
第三步
4、main.js引入該文件
import '../public/static/js/iconfont'
5、直接在vue文件中用
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-3Dyouxirenxiang"></use>
</svg>
.icon {
width: 40px;
height: 40px;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}