腳本之家服務器常用軟件

快捷導航

VUE在線調用阿里Iconfont圖標庫的方法

更新時間：2021年10月19日 10:24:02 作者：程序員勸退師-TAO

這篇文章主要介紹了VUE在線調用阿里Iconfont圖標庫的方法,內容是圍繞VUE前端和阿里Iconfont圖標庫展開的，經歷了從網站上東拼西湊圖標的時代，大概是15~16年左右我開始解除阿里Iconfont圖標庫，剛開始就只會下載圖標使用，需要的朋友可以參考下

前言

多年前我本是個服務端小白，隨著行業(yè)內卷，硬是被熬成了前端小白。。。開個玩笑，只是個人比較喜歡學習技術罷了！本章將帶領大家以另一個高端的方式打開阿里Iconfont圖標庫，過去，我們要么是自己在網上費好大勁，東拼西湊的找一些icon的圖片，來美化我們的網頁，然而隨著技術的發(fā)展，和一些大平臺的技術奉獻，這里不得不說阿里還是牛逼，這里不是夸它，給它打廣告，確實，人家在一些領域做的比某騰要好，可能也和領域有關吧，受我個人認知水平問題，我也只能這么認為，比如在我門JAVA服務端方向，阿里有Nacos、Canal、RocketMQ、Dubbo、Sentinel等一些開源技術。回歸正題?？礃祟}本章內容是圍繞VUE前端和阿里Iconfont圖標庫展開的，經歷了從網站上東拼西湊圖標的時代，大概是15~16年左右我開始解除阿里Iconfont圖標庫，剛開始就只會下載圖標使用，如下

在這里插入圖片描述

這種直接就是下載的圖片，還是比較lol，后面隨著前端技術的學習，直到寫uniapp的時候，開始學會使用圖標文件應用

在這里插入圖片描述

這種如果頻繁更改的圖標那么也需要頻繁從新下載圖標文件，從新導入，比較麻煩，那么本章將以在線引入阿里Iconfont圖標庫的方式動態(tài)加載，這種方式可以不用下載icon圖標，也不用下載icon圖標文件，個人感覺最方便的就是可以動態(tài)更新圖標庫！而且就算我們把阿里Iconfont圖標庫中的項目組刪除，只要生成過連接的，那么項目中還是可以使用的，但是不知道連接回收時間是多久！

開干Iconfont

官網

Iconfont

挑選圖標

在這里插入圖片描述

添加至項目

在這里插入圖片描述

獲取鏈接

在這里插入圖片描述

那么至此Iconfont平臺相關操作完畢，接下來是VUE方便的操作

在線調用測試

index.html引入連接

在這里插入圖片描述

<link rel="stylesheet"  rel="external nofollow" >

界面使用

<i class="iconfont icon-3column"></i>

效果查看

在這里插入圖片描述

測試完畢！

VUE項目整合

編寫添加head工具

/**
 * 動態(tài)插入css
 */

export const loadStyle = url => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = url
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(link)
}

這個就是幫我們在head添加link標簽的，效果如下
在這里插入圖片描述

main配置
導入加載link工具

import { loadStyle } from './utils/util'

初始化iconfont連接

let iconfontVersion = ['2872417_3u9w2bdk2b'];
const iconfontUrl = `//at.alicdn.com/t/font_$key.css`

這里為什么使用$key是因為如果我們有多個icon項目，那么我們可以iconfontVersion數組中多個添加即可

編寫替換$key連接方法，并調用添加link工具方法

// 動態(tài)加載阿里云字體庫
iconfontVersion.forEach(ele => {
  console.log(iconfontUrl.replace('$key', ele))
  loadStyle(iconfontUrl.replace('$key', ele))
})

完整代碼

在這里插入圖片描述

圖標使用

		 <i class="iconfont icon-3column"></i>
        <i class="iconfont icon-column-4"></i>

效果展示

在這里插入圖片描述

這里我們i標簽中需要固定寫iconfont，那么我們可以優(yōu)化一下

優(yōu)化iconfont
理論上我們使用iconfont圖標那么icon-3column、icon-column-4都是以icon-為前綴的，那么我們可以使用css匹配來做css疊加！
編寫common.scss文件，代碼如下

// 關于 圖標 CSS 的設置
[class^="icon-"] {
  font-family: "iconfont" !important;
  /* 以下內容參照第三方圖標庫本身的規(guī)則 */
  font-size: 18px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.avue-input-icon__item i, .avue-crud__icon--small {
  font-family: "iconfont" !important;
  /* 以下內容參照第三方圖標庫本身的規(guī)則 */
  font-size: 24px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-menu-item [class^=icon-] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

.el-submenu [class^=icon-] {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

全局引用
main文件中寫入