vue elementui 引入第三方icon iconfront
生活随笔
收集整理的這篇文章主要介紹了
vue elementui 引入第三方icon iconfront
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
elementui框架自帶icon在開發大型前端應用時顯得捉襟見肘。淘寶開源的iconfront的圖標庫上有很多優秀的icon圖標。elementui支持整合iconfront到應用中，步驟如下：
首先需要在iconfront注冊登陸，新建項目，然后把心儀的icon添加到項目中。
)
接下來有兩種做法，一種是在線鏈接，一種是下載解壓后拷貝到本地的項目。
在線鏈接方式如下
新建一個iconfont.css文件，添加如下內容，el-icon-ali是第一步新建項目時給定的icon名前綴。
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
接下來將iconfront項目提供的在線鏈接添加到vue項目的index.html中
<!DOCTYPE html>
<html>
<head>
...
<link>
</html rel="stylesheet" href="http://at.alicdn.com/t/font_1100946_7gqmadkiso5.css
">
在vue項目中的main.js中import剛才創建的iconfront.css
import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)
添加新icon時，只要更新index.html中的鏈接即可
下載導入方式
解壓下載出所有文件，拷貝到vue適當目錄中，找到iconfront.css文件，一樣添加如下內容
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
接下來只要在vue項目中的main.js中import剛才創建的iconfront.css即可
import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)
總結
以上是生活随笔為你收集整理的vue elementui 引入第三方icon iconfront的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gd动态曲线 php_PHP GD库动态
- 下一篇： AMD R9 7900X3D 现身《奇点