前端——阿里圖標的使用詳解


鏈接地址:http://www.iconfont.cn/

首先進入阿里圖標首頁進行登陸,有三種登陸方式,本人用新浪微博進行登陸。

可在搜索框輸入指定的圖標樣式,選中的圖標加入購物車,本人建議最好一次性將所需要的圖標都加入到購物車中,方便避免重復進行。

圖標加入購物車后,點擊右上角的購物出。

點擊新建一個項目

輸入項目的名稱並點擊確認

點擊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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM