CSS運(yùn)用阿里巴巴矢量庫(kù)快速在對(duì)應(yīng)位置加上好看的圖標(biāo)效果(實(shí)例代碼)
我要評(píng)論進(jìn)入阿里巴巴矢量圖標(biāo)庫(kù)
- 選擇喜歡的圖標(biāo)的，點(diǎn)擊添加到庫(kù)
- 選擇完之后，點(diǎn)擊右上角的購(gòu)物車圖標(biāo)（前提是已經(jīng)登錄，推薦使用GitHub登錄）
- 然后在右側(cè)中點(diǎn)擊添加至項(xiàng)目
- 之后在個(gè)人主頁(yè)中可以看見(jiàn)
1.Unicode
2.Font class
此次便是對(duì)于這兩個(gè)的使用
Unicode
開(kāi)始進(jìn)入時(shí)，會(huì)自動(dòng)生成代碼，如果沒(méi)有，則點(diǎn)擊生成
例:
@font-face {
font-family: 'iconfont'; /* project id 1743720 */
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
}
其中最最關(guān)鍵的是iconfont
同時(shí)，我們還需要修改其對(duì)應(yīng)的url路徑
以第一個(gè)舉例
<!--原來(lái)的url-->
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!--修改后的的url,打開(kāi)瀏覽器之后訪問(wèn)一下對(duì)應(yīng)的url，提示下載eot文件則修改成功-->
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
Unicode中對(duì)于圖標(biāo)的引用如下
在剛剛的個(gè)人頁(yè)面中，選中Unicode可以看見(jiàn)加入的圖標(biāo)都在下面,以搜索舉例
鼠標(biāo)滑上去以后可以看見(jiàn)復(fù)制代碼的圖標(biāo)，點(diǎn)擊復(fù)制
以下為實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖標(biāo)使用</title>
<style>
@font-face {
font-family: 'iconfont'; /* project id 1743720 */
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
}
.wrapper {
width: 1090px;
height: 300px;
background-color: antiquewhite;
margin: 0px auto;
text-align: center;
}
.iconTest::before {
/*此處為復(fù)制來(lái)的圖標(biāo)代碼，修改為以下形式*/
/* content: ""; */
content: "\e61a";
font-family: "iconfont";
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<span class="iconTest"> : Hello CSS</span>
</div>
</div>
</body>
</html>
效果圖
###Font Class中對(duì)于圖標(biāo)的引用
這個(gè)就要簡(jiǎn)便很多了
在圖標(biāo)庫(kù)個(gè)人主頁(yè)的Unicode旁邊就是Fonte Class點(diǎn)擊，再任選一個(gè)圖標(biāo)，復(fù)制代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖標(biāo)使用</title>
<!--以引入css資源的方式使用，url同樣修改一下，加入https://-->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
<style>
.wrapper {
width: 1090px;
height: 300px;
background-color: antiquewhite;
margin: 0px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--iconfont表示這個(gè)是一個(gè)圖標(biāo)樣式-->
<!--icon-sousuot表示這個(gè)是圖標(biāo)中的搜索-->
<span class="iconfont icon-sousuo"></span><span> : Hello CSS</span>
</div>
</div>
</body>
</html>
更加簡(jiǎn)便的使用
有時(shí)候，一個(gè)復(fù)雜的網(wǎng)頁(yè)包含各種圖標(biāo)的引用，例如導(dǎo)航欄每個(gè)欄目的前面都要一個(gè)圖標(biāo)，這個(gè)便用到了了::before,而同樣后面有時(shí)候又要用span來(lái)引用圖標(biāo)，這時(shí)，我們便可以引入Font-Class中的使用方法卻達(dá)到了兩種場(chǎng)景的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖標(biāo)使用</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
<style>
.wrapper {
width: 1090px;
height: 300px;
background-color: antiquewhite;
margin: 0px auto;
text-align: center;
}
.iconTest::after {
content: "\e61a";
font-family: "iconfont";
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hello CSS</span>
</div>
</div>
</body>
</html>
效果便是Hello CSS前后都有搜索圖標(biāo)
原因：打開(kāi)引入的css我們可以發(fā)現(xiàn)其中也包含了Unicode，因此之后的使用只需要引入Font-Class即可，而圖標(biāo)對(duì)應(yīng)的十六進(jìn)制編碼在Unicode中復(fù)制，也算是一個(gè)小技巧。
總結(jié)
到此這篇關(guān)于CSS運(yùn)用阿里巴巴矢量庫(kù)快速在對(duì)應(yīng)位置加上好看的圖標(biāo)效果(實(shí)例代碼)的文章就介紹到這了,更多相關(guān)css 阿里巴巴矢量圖標(biāo)庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css記錄文本圖標(biāo)對(duì)齊的幾種解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-03-23CSS拾遺之箭頭,目錄,圖標(biāo)的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS拾遺之箭頭,目錄,圖標(biāo)的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-14
CSS3鼠標(biāo)滑過(guò)圖片效果 用Font Awesome庫(kù)實(shí)現(xiàn)懸停圖標(biāo)
今天給大家?guī)?lái)一個(gè)比較傳統(tǒng)但卻非常實(shí)用的CSS3應(yīng)用，它的功能是可以快速生成一個(gè)帶鼠標(biāo)滑過(guò)特效的圖片，需要的朋友前來(lái)下載使用2019-10-23
