收藏
PHPz批改狀態(tài)：合格
老師批語(yǔ)：
進(jìn)入阿里圖標(biāo)網(wǎng)站，登錄后點(diǎn)擊頂部導(dǎo)航菜單中的“素材庫(kù)” => “圖標(biāo)庫(kù)”。
然后在頂部搜索框中輸入想要的圖標(biāo)，例如：購(gòu)物車，選擇一個(gè)圖標(biāo)，將光標(biāo)移動(dòng)到圖標(biāo)上，在彈出的對(duì)話框中選擇“加入購(gòu)物車”。
點(diǎn)擊頂部菜單欄中的購(gòu)物車按鈕，進(jìn)入購(gòu)物車頁(yè)面。
首次進(jìn)入需要先添加項(xiàng)目，點(diǎn)擊右側(cè)菜單中的“添加項(xiàng)目”，創(chuàng)建一個(gè)新項(xiàng)目。
如果以前添加過(guò)項(xiàng)目，進(jìn)入購(gòu)物車后會(huì)提示“添加至項(xiàng)目”，選擇已有項(xiàng)目或創(chuàng)建一個(gè)新項(xiàng)目。
進(jìn)入項(xiàng)目后可以看到剛添加的圖標(biāo)，選擇上面的圖標(biāo)格式，一般用“font class”。
將光標(biāo)移動(dòng)到圖標(biāo)上，在彈出對(duì)話框中選擇復(fù)制代碼，可以得到這個(gè)圖標(biāo)的類名（class）
點(diǎn)擊上面的”查看在線鏈接“，將在線鏈接復(fù)制下來(lái)。格式是這樣的：//at.alicdn.com/t/c/font_3964449_92cl1ylakf.css
然后再編輯器中外部樣式文件中引入在線圖標(biāo)庫(kù)：
@import url(//at.alicdn.com/t/c/font_3964449_92cl1ylakf.css);
在新建的HTML文件中，添加一個(gè)span標(biāo)簽，為其 class 屬性添加兩個(gè)屬性值： ”iconfont” 和 “icon-weixin“
<body><span class="iconfont icon-weixin"></span></body>
完成后效果如下圖：
效果不是太美觀，字體圖標(biāo)本質(zhì)是一種字體，可以用字體樣式來(lái)設(shè)置其大小、顏色等樣式
.icon-weixin{font-size: 130px;color: green;}
13.最終效果：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)