gulp之向項目中添加 icon 圖標

注:這裏使用的是從“阿里巴巴矢量圖標庫”(http://www.iconfont.cn/)下載的圖標。
因爲之前引入了 yo3(yo包的第三版) 包,yo包中已經定義了一些字體圖標,不過就二十幾個,遠遠不夠,所以我們要是用的話,一般還是自己再引入。但是還是有好處的,因爲yo 包已經爲我們定義好了 font-family:yofont 和 類名:yo-ico 。我們在使用的時候,藉助 sass 語法中的 merge 合併,可以將我們自己下載的圖標添加到項目中供我們使用。
yo 包中定義font-face的文件node_modules / yo3 / style / lib / core / classes / _iconfont.scss
yo 包中定義font-face的類名(.$_ico)的文件node_modules / yo3 / style / lib / core /variables.scss
新建一個文件 common.scss

    @font-face{
        font-family: 'yofont';
        src: url('/images/iconfont/iconfont.woff') format('woff'), url('/images/iconfont/iconfont.ttf') format('truetype');
}

這裏因爲只需要兼容手機端的瀏覽器,所以只引入了 .woff 和 .ttf 文件。(路徑可以寫成從 common.scss 到要引入的文件的完成路徑,也可以寫成這樣,至於爲什麼,有待解決)(路徑只做參考)
將common.scss文件引入到根文件(app.scss)文件上:

@import './usage/moduls/common';

HTML文件中引入:

        <ul>
            <li>
                <i class="yo-ico">&#xe62e;</i>
                <b>職位</b>
            </li>
            <li>
                <i class="yo-ico">&#xe632;</i>
                <b>搜索</b>
            </li>
            <li>
                <i class="yo-ico">&#xe62f;</i>
                <b>我的</b>
            </li>
        </ul>

因爲common.scss 文件是用來放一些公用文件的,所以如果想在其他頁面也添加圖標,圖標的配置也是在這個文件中完成的,只需要將路徑改變即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章