微信小程序开发引用iconfont字体图标

举报
国服第二切图仔 发表于 2022/07/10 15:06:55 2022/07/10
【摘要】 ​ 一、选好图标后在APP.vue中进行配置<style lang='scss'> /* 全局公共样式和字体图标 */ @font-face { font-family: "iconfont"; font-weight: normal; font-style: normal; src: url('https://at.alicdn.com/t/font_2308342_84cfdl...

 一、选好图标后在APP.vue中进行配置

<style lang='scss'>
	/*
		全局公共样式和字体图标
	*/
	@font-face {
		font-family: "iconfont";
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype');
	}
</style>


主要是src的地址,iconfont上给的是不加https:的,这块需要我们自己给加上,不然在小程序真机的时候会出现不显示的情况
二、添加图标的css,可以外链,我这里直接内嵌进来的
(1)把提供的地址在浏览器打开

编辑
(2)复制我们需要的css代码,这是复制之后的吧

<style lang='scss'>
    /*
        全局公共样式和字体图标
    */
    @font-face {
        font-family: "iconfont";
        font-weight: normal;
        font-style: normal;
        src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype');
    }
    
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        color: #ff0026;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-shezhi:before {
      content: "\e648";
    }
 
    .icon-shangpin:before {
        content: "\e6a4";
    }
 
    .icon-fangxinjiaoyi:before {
        content: "\e6e8";
    }
 
    .icon-zhengpinbaozheng:before {
        content: "\e6f4";
    }
 
    .icon-qitianwuliyoutuihuan:before {
        content: "\e63d";
    }
 
    .icon-48xiaoshi:before {
        content: "\e765";
    }
 
    .icon-weixinzhifu:before {
        content: "\e60c";
    }
</style>


三、页面上的使用
<text class="iconfont icon-fangxinjiaoyi" ></text>

这样就可以愉快的使用iconfont字体来丰富你的界面啦!!

觉得有帮助的朋友,可以一键三连哦

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。