微信小程序引入iconfont图标

最新推荐文章于 2024-05-06 14:37:14 发布
最新推荐文章于 2024-05-06 14:37:14 发布
阅读量437 收藏 1
点赞数 1
文章标签： 小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44578313/article/details/105808431
版权

  1. 进入阿里巴巴矢量图标库官网
    https://www.iconfont.cn/
    （1）选择素材加入购物车,添加至项目

    （2）每次添加新素材至项目的时候，都要点击更新

    2.引入公共部分样式
    （1）建公用样式文件，方便后期直接引入




    3.界面引入图标
    （1）wxml部分

    （2）wxss部分

    注：图标素材部分的代码是浏览器打开链接复制摘取过来的，颜色和字体可自定义
    （3）js部分

4.显示效果

Reese Tuen
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序使用iconfont图标
q1004124842的博客
04-28 644
图标的下载和平时一致,主要区别是在使用的时候 1. 引用的路径需要根据文件地址引入 2. 需要对woff文件做转换,转换网站https://transfonter.org/, 开启base64转换 @font-face { font-family: "iconfont"; /* Project id 1183980 */ /* 引用的路径也需要做修改 */ src: url('/style/iconfont.woff2?t=1651111039226') format('
微信小程序中使用iconfont图标
Enola_li的博客
06-03 566
iconfont图标在小程序中使用 1.首先注册并登录http://www.iconfont.cn，然后搜索自己要用的图标 2.将需要的图标添加到购物车可以有如下三个选项，为了方便尽量选择添加到创建的项目 3.下载字体文件至本地 4.打开下载后的文件，选择后缀为ttf的文件，在https://transfonter.org/将字体文件转换为 base64 格式 5.打开下载的文件，选择后缀为CSS的文件复制其内容，添加到 app.wxss文件中 6.定义图标,content后的内容为对应的图标
微信小程序展示长图与pdf
shi450561200的博客
02-09 1859
实现思路，就是使用常用控件view ,但是会遇到的问题是，长图大小超过屏幕大小时，就会出现图片被压缩的情况。
微信小程序如何使用svg矢量图标
最新发布
weixin_45465881的博客
05-06 1957
在微信小程序中，经常会用到小图标来装饰界面，我们常用的方法就是引用第三方的图标，但会存在收费或者找不到合适的图标，这时候我建议可以自行编写svg图标代码，就可以随心所欲的使用。具体的效果图如下：那么在微信小程序中，具体怎样引用自定义的图标的呢，大概的步骤我浅浅的分享如下：</
微信小程序常用图标大全1
weixin_53000033的博客
05-22 5346
微信小程序常用图标大全1
微信小程序添加icon图标教程
热门推荐
Linlietao0587的博客
12-22 2万+
1 官方自带 icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html <icon type="success"></icon> type一共有8个 2 自定义添加 阿里巴巴矢量图标库 地址 https://www.iconfont.cn/ 2.1 使用 比如：我搜索 爱心 选择点击 购物车 点击右上方的 购物车 添加至项目 我随便选择 一个 demo项目，然后点确认
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 3658
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
微信小程序 如何引入外部字体库iconfont的图标
08-28
总的来说，引入Iconfont图标到微信小程序主要涉及以下步骤： 1. 在Iconfont网站上创建项目并添加图标。 2. 在`app.wxss`中定义`@font-face`规则并引入字体资源。 3. 定义`.iconfont`全局样式以及各图标对应的CSS伪类...
iconfont 微信小程序一些图标
06-15
【标题】：“iconfont 微信小程序一些图标” 在微信小程序的开发过程中，图标是界面设计的重要组成部分，为用户提供直观的视觉指引。"iconfont" 是一种常用的图标解决方案，它是一种基于字体的图标系统，允许开发者...
微信小程序使用字体图标的方法
11-30
在微信小程序中使用字体图标，通常需要遵循一系列步骤，这些步骤与传统的Web前端开发有所不同。...通过以上方法，开发者可以方便地在微信小程序中引入和使用各种字体图标，丰富用户界面的视觉效果。
详解mpvue小程序中怎么引入iconfont字体图标
10-17
在微信小程序中，我们只需保留css和ttf文件，因为小程序不支持其他格式的字体文件。对于ttf文件，有两种引入方式： 1. **本地引入**： 首先，删除原有css文件中引入eot、ttf、svg和woff的部分，只保留base64编码的...
在微信小程序中使用iconfont
m0_46526358的博客
02-12 8794
微信小程序上使用iconfont的方法一、选取需要的icon二、在微信小程序中使用iconfont三、其他 一、选取需要的icon 1、在iconfont上选取自己所需要的图标，然后添加到库内 2、将挑选的图标添加到自定义的项目中 3、选择生成font class的代码 4、点击链接进入代码并复制全部 二、在微信小程序中使用iconfont 1、在项目下创建style文件夹，并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2、在app.wxss内引
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3679
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
微信小程序之使用iconfont
weixin_44943855的博客
02-05 842
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序使用 iconfont
前端挖掘机
03-11 583
base64。
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 666
微信小程序引入 iconfont 矢量图标（Font class ）;
微信小程序使用iconfont
05-21
是可以使用iconfont的，具体步骤如下： 1. 在iconfont官网上找到需要的图标，加入购物车并下载。 2. 在微信小程序开发工具中创建一个iconfont目录，将下载的图标文件拷贝到该目录下。 3. 在需要使用图标的页面的json文件中引入iconfont.wxss文件。示例代码如下： ``` { "usingComponents": {}, "navigationBarTitleText": "我的", "usingComponents": { "icon": "/iconfont/iconfont.wxss" } } ``` 4. 在需要使用图标的页面的wxml文件中，使用iconfont提供的样式类来渲染图标。示例代码如下： ``` <view class="iconfont icon-XXX"></view> ``` 其中，icon-XXX为对应图标的类名，XXX为图标的Unicode码，可以在iconfont官网上找到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值