首先進入阿里圖標首頁進行登陸,有三種登陸方式,本人用新浪微博進行登陸。
可在搜索框輸入指定的圖標樣式,選中的圖標加入購物車,本人建議最好一次性將所需要的圖標都加入到購物車中,方便避免重復進行。
圖標加入購物車后,點擊右上角的購物出。
點擊新建一個項目
輸入項目的名稱並點擊確認
點擊Font-class和查看在線連接,若沒有連接,點擊紅色的生產連接即可,就出現了一個css樣式的連接。這個樣式里儲存了你項目里所有選中的圖標。
可以復制這個連接,在網頁中打開這個鏈接。可以看到這些圖標有一個總的樣式,屬性名叫iconfont,所以在使用這個圖標時,一定要加上這個屬性。然后五個圖標各自有一個獨立的樣式,分別叫icon-weixin、icon-weixin1、icon-weixin2、icon-weixin3、icon-weixin4、icon-weixin5。
下面簡單展示下這幾個圖標,要注意的是,處理阿里圖標樣式可以與文字處理一樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_923612_bsbnso2jta.css">
<style>
*{
margin: 0;
padding: 0;
}
span.icon-weixin5{
font-size: 50px;
}
span.icon-weixin4{
font-size: 50px;
}
span.icon-weixin3{
font-size: 50px;
}
span.icon-weixin2{
font-size: 50px;
}
span.icon-weixin1{
font-size: 50px;
}
</style>
</head>
<body>
<span class="iconfont icon-weixin4"></span>
<span class="iconfont icon-weixin5"></span>
<span class="iconfont icon-weixin3"></span>
<span class="iconfont icon-weixin2"></span>
<span class="iconfont icon-weixin1"></span>
</body>
</html>