詳細介紹vue項目中應用阿里巴巴矢量圖標庫

roland_reed 發布于2019-08-23 12:16 / 1857人閱讀

摘要：列表項目首先進入阿里巴巴矢量圖標庫的官方網址一選擇其中一種方式登錄。

列表項目

首先進入阿里巴巴矢量圖標庫的官方網址：
http://www.iconfont.cn/home/i...

一、選擇其中一種方式登錄。

二、點擊導航欄上面的“圖標管理”新建項目

新建項目會彈出一個彈出框

三、返回圖標庫，挑選開發中需要用到的圖標，并加入購物車
可以通過搜索框搜索關鍵字，快速找到對應的圖標

1.加入購物車

2.添加至項目

3.生成代碼

回到之前創建的項目，生成代碼應用

四、將圖標應用到vue項目

1.在vue項目中的 index.html 中引入

2.插入圖標，用i標簽，前面的選擇器“icon iconfont”必須要有，后面才是復制選中的圖標的代碼

如果想更改這個圖標的顏色，大小等其他樣式，可以直接用改變其樣式

.icon-changjingguanli{
    color:red;
    font-size:16px;
}

五、圖標會根據項目的開發需求，不斷的增加，所以需要更新代碼

1.更新代碼

2.把更新的代碼更新應用在index.html上

3.插入新圖標與之前步驟相同

云服務器 GPU云服務器免費矢量圖標網站阿里云服務器搭建vue項目詳細介紹 webrtc怎么實際應用在項目中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98211.html

Dcloud,hbuilderX開發uni-app第一天踩坑記錄

摘要：其實大部分坑在在官網都有介紹具體位置在在中使用模塊官方文檔中總結了很多坑，但我只說一下我今天遇到的坑不支持中的過濾器解決辦法從后臺獲取數據后始用對數據進行處理，例子始用過濾器時始用僅為示例，并非真實接口地址。其實大部分坑在 uni-app在官網都有介紹具體位置在在 uni-app 中使用 Vue.js 模塊官方文檔中總結了很多坑，但我只說一下我今天遇到的：坑1：uni-app...

zqhxuyuan 2019-08-23 11:31 評論0 收藏0
在vue項目中使用阿里矢量庫

摘要：阿里矢量庫使用方法簡易教程寫在前面之前項目是自己寫的項目來練手，所以用的矢量庫。點擊生成最新的三如果在項目中引入和使用在點擊生成生成一段地址。在里要加入你在建項目時候自定義的前綴，在中增加在下面圖標的名字阿里矢量庫使用方法簡易教程寫在前面：之前項目是自己寫的項目來練手，所以用的矢量庫。工作里面如果UI不用的話也只能用其他方法了。我們目前用的SVG,大家的項目里面都用的是那種形式呢？...

chenjiang3 2019-08-26 10:26 評論0 收藏0
阿里巴巴矢量圖標庫（Iconfont）-利于UI和前端的搭配

摘要：首先我們需要找到這個網站打開之后看到的首頁大概是這個樣子里面有搜索框，首先先是來找圖標設計，里面圖標大都是免費的，而且樣式多種多樣，打個比方我們搜索一個首頁的圖標。　　　　前端時間，做一個小網站的時候，需要用到很多小圖標，UI設計好之后不知道如何使用，如果使用圖片那會很麻煩，相信一些前端更喜歡iconfont這樣的標簽直接調用，這樣包括顏色和大小以及使用都更方便快捷，于是我們經過交流之后決定...

goji 2019-04-23 11:47 評論0 收藏0