快捷導(dǎo)航

VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的方法

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

這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫(kù)展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時(shí)代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫(kù)，剛開始就只會(huì)下載圖標(biāo)使用，需要的朋友可以參考下

前言

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

在這里插入圖片描述

這種直接就是下載的圖片，還是比較lol，后面隨著前端技術(shù)的學(xué)習(xí)，直到寫uniapp的時(shí)候，開始學(xué)會(huì)使用圖標(biāo)文件應(yīng)用

在這里插入圖片描述

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

開干Iconfont

官網(wǎng)

Iconfont

挑選圖標(biāo)

在這里插入圖片描述

添加至項(xiàng)目

在這里插入圖片描述

獲取鏈接

在這里插入圖片描述

那么至此Iconfont平臺(tái)相關(guān)操作完畢，接下來(lái)是VUE方便的操作

在線調(diào)用測(cè)試

index.html引入連接

在這里插入圖片描述

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

界面使用

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

效果查看

在這里插入圖片描述

測(cè)試完畢！

VUE項(xiàng)目整合

編寫添加head工具

/**
 * 動(dòng)態(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)
}

這個(gè)就是幫我們?cè)趆ead添加link標(biāo)簽的，效果如下
在這里插入圖片描述

main配置
導(dǎo)入加載link工具

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

初始化iconfont連接

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

這里為什么使用$key是因?yàn)槿绻覀冇卸鄠€(gè)icon項(xiàng)目，那么我們可以iconfontVersion數(shù)組中多個(gè)添加即可

編寫替換$key連接方法，并調(diào)用添加link工具方法

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

完整代碼

在這里插入圖片描述

圖標(biāo)使用

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

效果展示

在這里插入圖片描述

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

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

// 關(guān)于 圖標(biāo) CSS 的設(shè)置
[class^="icon-"] {
  font-family: "iconfont" !important;
  /* 以下內(nèi)容參照第三方圖標(biāo)庫(kù)本身的規(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;
  /* 以下內(nèi)容參照第三方圖標(biāo)庫(kù)本身的規(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文件中寫入

import './styles/common.scss'

效果查看

在這里插入圖片描述

搞定

到此這篇關(guān)于VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的文章就介紹到這了,更多相關(guān)VUE調(diào)用阿里Iconfont圖標(biāo)庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: