CSS運用阿里巴巴矢量庫快速在對應位置加上好看的圖標效果(實例代碼)
發(fā)布時間：2020-04-14 15:27:09 作者：夾葉 
我要評論
我要評論這篇文章主要介紹了CSS運用阿里巴巴矢量庫快速在對應位置加上好看的圖標效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
進入阿里巴巴矢量圖標庫
- 選擇喜歡的圖標的，點擊添加到庫
- 選擇完之后，點擊右上角的購物車圖標（前提是已經登錄，推薦使用GitHub登錄）
- 然后在右側中點擊添加至項目
- 之后在個人主頁中可以看見
1.Unicode
2.Font class
此次便是對于這兩個的使用
Unicode
開始進入時，會自動生成代碼，如果沒有，則點擊生成
例:
@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');
}
其中最最關鍵的是iconfont
同時，我們還需要修改其對應的url路徑
以第一個舉例
<!--原來的url-->
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!--修改后的的url,打開瀏覽器之后訪問一下對應的url，提示下載eot文件則修改成功-->
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
Unicode中對于圖標的引用如下
在剛剛的個人頁面中，選中Unicode可以看見加入的圖標都在下面,以搜索舉例
鼠標滑上去以后可以看見復制代碼的圖標，點擊復制
以下為實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖標使用</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 {
/*此處為復制來的圖標代碼，修改為以下形式*/
/* 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中對于圖標的引用
這個就要簡便很多了
在圖標庫個人主頁的Unicode旁邊就是Fonte Class點擊，再任選一個圖標，復制代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖標使用</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表示這個是一個圖標樣式-->
<!--icon-sousuot表示這個是圖標中的搜索-->
<span class="iconfont icon-sousuo"></span><span> : Hello CSS</span>
</div>
</div>
</body>
</html>
更加簡便的使用
有時候，一個復雜的網頁包含各種圖標的引用，例如導航欄每個欄目的前面都要一個圖標，這個便用到了了::before,而同樣后面有時候又要用span來引用圖標，這時，我們便可以引入Font-Class中的使用方法卻達到了兩種場景的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖標使用</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前后都有搜索圖標
原因：打開引入的css我們可以發(fā)現其中也包含了Unicode，因此之后的使用只需要引入Font-Class即可，而圖標對應的十六進制編碼在Unicode中復制，也算是一個小技巧。
總結
到此這篇關于CSS運用阿里巴巴矢量庫快速在對應位置加上好看的圖標效果(實例代碼)的文章就介紹到這了,更多相關css 阿里巴巴矢量圖標庫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了css記錄文本圖標對齊的幾種解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2020-03-23- 這篇文章主要介紹了CSS拾遺之箭頭,目錄,圖標的實現代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-14
CSS3鼠標滑過圖片效果 用Font Awesome庫實現懸停圖標
今天給大家?guī)硪粋€比較傳統但卻非常實用的CSS3應用，它的功能是可以快速生成一個帶鼠標滑過特效的圖片，需要的朋友前來下載使用2019-10-23
