阿里巴巴字體素材平臺(tái)（阿里巴巴字體庫(kù)）

大家好！今天讓小編來(lái)大家介紹下關(guān)于阿里巴巴字體素材平臺(tái)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、阿里巴巴分批次下載的字體圖標(biāo)使用

• 2、阿里巴巴iconfont正確的使用方式是什么?

• 3、阿里巴巴矢量圖標(biāo)庫(kù)怎么生產(chǎn)在線字體

• 4、iconfont阿里巴巴圖標(biāo)有填色嗎

一、阿里巴巴分批次下載的字體圖標(biāo)使用

阿里巴巴分批次下載的字體圖標(biāo)使用方式：

1、字體圖標(biāo)的大小通過(guò)fontsize控制，字體越大圖標(biāo)越大，字體顏色通過(guò)color控制，可控制字體的屬性，都可以用使用時(shí)與普通字體無(wú)異，可以設(shè)置字號(hào)大小，顏色透明度等等，阿里巴巴字體圖標(biāo)使用。

2、在圖標(biāo)庫(kù)中選擇需要的圖標(biāo)，鼠標(biāo)經(jīng)過(guò)該圖標(biāo)加入購(gòu)物車。

3、選擇完成后，點(diǎn)擊右上角購(gòu)物車，添加到對(duì)應(yīng)項(xiàng)目即可。

二、阿里巴巴iconfont正確的使用方式是什么?

對(duì)于正確使用阿里巴巴iconfont想必大家都有一定的了解，但是詳細(xì)的使用方式我想大家都是大同小異的吧，那么我就把它告訴大家，以便大家方便使用。

具體使用方法如下：

1.首先在I阿里巴巴iconfont矢量圖標(biāo)庫(kù)這個(gè)頁(yè)面上把你需要的相應(yīng)圖標(biāo)隨后就會(huì)點(diǎn)擊購(gòu)物車按鈕加入暫存架；

2.其次就是選擇完你所需要所有要用的圖標(biāo)后，這時(shí)你就需要給它命名。然后你還要在圖標(biāo)管理所對(duì)應(yīng)的圖標(biāo)應(yīng)用項(xiàng)目中，最后找到這個(gè)項(xiàng)目，獲取在線鏈接，把里面的代碼復(fù)制到CSS中；

3.完成以上步驟后在HTML中需要使用到圖標(biāo)時(shí)，使用iconfont類名。

4.最后就是你可以通過(guò)控制iconfont類的屬性改變圖標(biāo)的樣式。

這樣你就完成了你所需的相關(guān)需求，通過(guò)以上操作，你可以輕松完成。那為什么我們要使用阿里巴巴iconfont，其實(shí)也不難發(fā)現(xiàn)，顧名思義iconfont也就是把圖標(biāo)用字體的方式呈現(xiàn),其優(yōu)點(diǎn)在于以下幾個(gè)方面:首先可以通過(guò)css的樣式改變其顏色，其實(shí)不是專業(yè)人士是很難搞定的，其次就是相對(duì)于圖片來(lái)說(shuō),具有更高的分辨率，最后就是它擁有更小的存儲(chǔ)，對(duì)于我們來(lái)說(shuō)非常方便，所以這就是它的優(yōu)點(diǎn)所在。任何東西的使用都有它的兩面性，它的缺點(diǎn)就是瀏覽器兼容性不夠普及,所幸目前大部分主流瀏覽器都支持。

但是只要你學(xué)會(huì)了使用的方法就會(huì)很快上手，所以說(shuō)現(xiàn)在的科技也是有它的好處，使用它的方法其實(shí)就是你根據(jù)方法進(jìn)行操作，那么你就會(huì)很快，學(xué)習(xí)這些并不是一成不變的，所以祝你早日學(xué)會(huì)。

三、阿里巴巴矢量圖標(biāo)庫(kù)怎么生產(chǎn)在線字體

下載圖標(biāo)

1

由于度娘限制，自己百度下載地址吧~

輸入逗阿里巴巴矢量圖標(biāo)庫(kù)地百度搜索第一位就是啦

2

打開網(wǎng)址，你可以選擇右上角的搜索，搜索自己要的圖標(biāo)，例如美女

3

也可以選擇去圖標(biāo)庫(kù)自行選擇想要的圖標(biāo)

4

選擇圖標(biāo)，點(diǎn)擊圖標(biāo)變成橘色，即放在暫存架

5

再次點(diǎn)擊即可取消，或者在暫存架中鼠標(biāo)滑過(guò)圖標(biāo)，圖標(biāo)右上角有刪除小按鈕也可刪除選中

6

選擇好要用的圖標(biāo)后，點(diǎn)擊暫存架的下載至本地，解壓待用

END

項(xiàng)目引用

1

打開解壓的文件夾中的demo.html

2

我們下載的圖標(biāo)可看到了吧，按照demo的步驟，下面我們配置ionic的項(xiàng)目

3

靜態(tài)文件存放目錄，新建font文件夾用來(lái)存放字體文件（可自定義存放）

4

css使用font-face聲明字體

5

css定義使用iconfont的樣式

6

挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面就可以顯示圖標(biāo)啦

END

Tab及其他標(biāo)簽引用圖標(biāo)

1

大家發(fā)現(xiàn)，Ionic的圖標(biāo)只要加個(gè)類似ion-happy ion-XXX的class就可以應(yīng)用相應(yīng)的圖標(biāo)，那么我們?cè)趺从冒⒗锇桶偷氖噶繄D標(biāo)呢，不要急也有辦法

打開直接解壓的圖標(biāo)文件中的iconfont.css文件

2

將那些.icon-XXX:before{content:'XXXX'}也復(fù)制到你的css文件中去

看過(guò)ionic css文件源碼的童鞋，是不是看到這些有點(diǎn)熟悉呢

3

那就對(duì)啦，只要在class中加 iconfont icon-XXX就可以使用圖標(biāo)了

四、iconfont阿里巴巴圖標(biāo)有填色嗎

可以的，直接修改顏色和改變大小。

常見(jiàn)的使用方法：

使用icon font來(lái)生成圖標(biāo)相對(duì)于基于圖片的圖標(biāo)來(lái)說(shuō)，有如下的好處：

1.自由的變化大小

2.自由的修改顏色

3.添加陰影效果

4.IE6也可以支持

5.支持圖片圖標(biāo)的其它屬性，例如，透明度和旋轉(zhuǎn)等等

6.可以添加text-stroke和background-clip:text等屬性，只要瀏覽器支持

經(jīng)過(guò)在網(wǎng)站搜索發(fā)現(xiàn)了這個(gè)網(wǎng)站提供了一些使用的方法，大家有使用過(guò)嗎？

1、設(shè)計(jì)源常用字體圖標(biāo)庫(kù)-IconFont：

http://www.websjy.com/club/dianshang/iconfont/

2、阿里iconfont字庫(kù)

http://www.iconfont.cn/

這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫(kù)，包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)。

希望對(duì)你有幫助！

iconfont阿里巴巴圖標(biāo)字體 下載：