亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue項目中使用iconfont方式

 更新時間:2024年07月27日 09:08:25   作者:不吃香菜的蟹老板  
這篇文章主要介紹了vue項目中使用iconfont方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue項目中引入iconfont的方式

iconfont的三種使用方法

  • unicode 不常用
  • Font class 像字體一樣使用,默認(rèn)黑色圖標(biāo),無法修改顏色
  • Symbol 支持多色圖標(biāo),更靈活,推薦

一、unicode

二、Font class

方式一:下載到本地

  • 第一步:iconfont-資源管理-我的項目-Font class -下載到本地

  • 第二步:引入至項目中

在 index.html

<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" rel="external nofollow"  />
  • 第三步:vue頁面中使用
<span class="iconfont icon-off-line"></span>

方式二:在線引用

iconfont-資源管理-我的項目-Font class - 查看在線鏈接 - 項目引用樣式文件 - 頁面中使用;

使用方式跟上面的方式一大體相同,只是在index.html中引入href 不一樣

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

 ??????

三、Symbol

3.1 下載到本地的方式

  • 3.1.1 iconfont-我的項目-symbol-下載到本地 - 解壓提取出最低層文件夾(font_421XXXXX)-重命名文件夾為 iconfont(包含iconfont.js)放在vue項目中(我是放在/assets/ )

  • 3.1.2 在assets 目錄下建一個icon.css文件 /assets/css/icon.css
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
  • 3.1.3 在main.js中 引入js和css
import './assets/iconfont/iconfont.js'
import './assets/css/icon.css'
  • 3.1.4 最后vue文件中使用圖標(biāo)
<svg class="icon outerColor" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

3.2 在線引用的方式

  • 3.2.1 、 iconfont-我的項目-symbol-查看在線鏈接-復(fù)制鏈接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js
  • 3.2.2 、 第二步跟上面一樣,在assets 目錄下建一個icon.css文件
  • 3.2.3、 在mian.js中引入 icon.css文件,在index.html引入在線js資源文件并且加上前綴 https:

!!! 記住在線的引入不是在main.js中引入js文件了,因為沒有本地iconfont目錄,而是在index.html中引入

// 在 main.js

import './assets/css/icon.css'

// 在public/index.html

<head>
    <script src="https://at.alicdn.com/t/c/font_4*****_famq0z6ltd.js"></script>
</head>
  • 3.2.4 最后在頁面中使用圖標(biāo)是一樣的
<svg class="icon outerColor" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

3.3 修改圖標(biāo)顏色

  • 在線修改:選中圖標(biāo) 批量去色
  • 本地修改:把js文件用正則表達(dá)式找出fill屬性,把fill屬性全干掉
  • 最后,設(shè)置外層顏色
.outerColor{
	  color: red;
}

個人認(rèn)為:

在線引入的方式比較適合項目開發(fā)測試階段,因為圖標(biāo)可能會有新增修改,使用在線引入的方式就不用每次UI小姐姐編輯了圖標(biāo)都要開發(fā)人員去下載;

本地下載引入的方式適合在運(yùn)行上線階段,避免線上引入不穩(wěn)定訪問不了圖標(biāo)。

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue2.0 多 Tab切換組件的封裝實例

    Vue2.0 多 Tab切換組件的封裝實例

    本篇文章主要介紹了Vue2.0 多 Tab切換組件的封裝實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • Vue2.0 vue-source jsonp 跨域請求

    Vue2.0 vue-source jsonp 跨域請求

    這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請求,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • vue3中的elementPlus全局組件中文轉(zhuǎn)換方式

    vue3中的elementPlus全局組件中文轉(zhuǎn)換方式

    這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue中methods、mounted等的使用方法解析

    vue中methods、mounted等的使用方法解析

    這篇文章主要介紹了vue中methods、mounted等的使用方法解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue的Flux框架之Vuex狀態(tài)管理器

    Vue的Flux框架之Vuex狀態(tài)管理器

    本文內(nèi)容主要參考官方教程,為了方便理解,用更加通俗的文字講解Vuex,也原文內(nèi)容做一些重點(diǎn)引用。希望會對你有所幫助。
    2017-07-07
  • 詳解如何在vue項目中使用layui框架及采坑

    詳解如何在vue項目中使用layui框架及采坑

    這篇文章主要介紹了vue使用layui框架,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vue為自定義路徑設(shè)置別名的方法

    vue為自定義路徑設(shè)置別名的方法

    這篇文章介紹了vue為自定義路徑設(shè)置別名的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • vue3基礎(chǔ)知識剖析

    vue3基礎(chǔ)知識剖析

    筆者這篇文章會從vue3基礎(chǔ)的知識點(diǎn)開始剖析,特別是在將composition?API的時候,在代碼示例中不會一上來就使用setup語法糖,而是用早期的setup函數(shù),這樣方便于初學(xué)的小伙伴們理解跟學(xué)習(xí)
    2022-08-08
  • Vue3 Element Plus el-form表單組件示例詳解

    Vue3 Element Plus el-form表單組件示例詳解

    這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進(jìn)了一些細(xì)節(jié)和樣式,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2023-04-04
  • vue實現(xiàn)將時間戳轉(zhuǎn)換成日期格式

    vue實現(xiàn)將時間戳轉(zhuǎn)換成日期格式

    這篇文章主要介紹了vue實現(xiàn)將時間戳轉(zhuǎn)換成日期格式方式,具有很好的參考價值,希望對大家有所幫助,
    2023-10-10

最新評論