首页 > 编程知识 正文

vue的icon图标,小图标

时间:2023-05-04 15:44:58 阅读:137631 作者:1489

注:我使用的是从“阿里巴巴矢量图形库”(http://www.iconfont.cn/)下载的图标。

因为之前引入了yo3(yo包的第三版)包,所以yo包上定义了一些字体图标,但是只有二十几个还不够,所以我们要用的话,一般都是自己重新引入。 不过,还有件好事。 yo包已经font-family:yofont 和 类名:yo-ico我们使用的时候,可以利用sass语法的merge合并,把我们自己下载的图标添加到项目中使用。

3358 www.Sina.com/: node _ modules/yo3/style/lib/core/classes/_ icon font.scss

33558 www.Sina.com/: node _ modules/yo3/style/lib/core/variables.scss

新文件yo 包中定义font-face的文件

@ font-face { font-family : ' yo font '; src : URL (/images/icon font/icon font.woff ) (format )、URL )/images/icon font/icon font.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/ulcommon.scss文件用于包含几个公共文件,因此如果要在其他页面中添加图标,也可以在此文件中放置图标。 只需要更改路径。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。