阿里圖標庫使用IconFont

本文轉載自查看原文 2019-03-27 10:33 787 js基礎

1、注冊賬號登陸

2、創建項目

3、搜索想使用的圖標，添加入庫，或者上傳自己的圖標入庫

4、在圖標庫中，將添加的圖標加入項目

5、將項目圖標下載至本地

6、下載文件為

包括三種格式，使用方法不同

Unicode
Font class
Symbol

7、將文件引入頁面開始使用，引入iconfot.css, 如果圖標是多色的，那么就需要引入iconfont.js文件

代碼實現，css

    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
                url('iconfont.woff2') format('woff2'),
                url('iconfont.woff') format('woff'),
                url('iconfont.ttf') format('truetype'),
                url('iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 32px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

html

<body>
    <span class="iconfont">&#xe657;</span>
    <span class="iconfont">&#xe661;</span>
    <span class="iconfont">&#xe646;</span>
    <span class="iconfont">&#xe658;</span>
    <span class="iconfont">&#xe66a;</span>
    <span class="iconfont">&#xe609;</span>
    <span class="iconfont">&#xe600;</span>
    <span class="iconfont">&#xe6e1;</span>
</body>

效果圖

大功告成

免責聲明！

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

猜您在找 小程序中使用阿里圖標庫iconfont vue中如何使用iconfont（阿里巴巴圖標庫）在antd中如何使用阿里的圖標庫，iconfont 開發輔助 | 阿里圖標庫iconfont入門使用 vue中使用阿里圖標庫iconfont和在舊有的iconfont中添加新的圖標 antd使用iconfont阿里圖標庫，在線或者離線引入本地js使用 vue引入iconfont阿里字體圖標庫以及報錯解決 vue項目中使用本地阿里圖標庫（iconfont） Vue、Element-ui項目中如何使用Iconfont(阿里圖標庫) 微信小程序使用iconfont圖標庫