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 文件是用来放一些公用文件的,所以如果想在其他页面也添加图标,图标的配置也是在这个文件中完成的,只需要将路径改变即可。

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