小程序引入iconfont字体图标

已于 2022-11-29 16:49:57 修改
阅读量1.5k 收藏 6
点赞数 2
文章标签： 小程序
于 2021-09-18 10:13:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/janyxh/article/details/120361834
版权
本文介绍了如何在小程序中引入并使用iconfont字体图标，包括挑选图标、下载、解压、重命名及引入wxss文件，以及处理自定义组件显示问题的方法。
摘要由CSDN通过智能技术生成

1.挑选图标，加入项目
在这里插入图片描述
在这里插入图片描述
2.进入项目，下载到本地
在这里插入图片描述
3.解压文件后，复制iconfont.css放到小程序项目里，并重命名，修改为iconfont.wxss。并在app.wxss内引入该样式。

@import "iconfont.wxss";   
/* 修改成你放置样式文件的路径 */

4.复制在线链接代码，替换iconfont.wxss里的@font-face样式。
在这里插入图片描述
5.打开wxml文件，写一行代码，格式如下。


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  janyxh
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
小程序使用iconfont字体图标

				
			

			

				

					m0_69876298的博客
				

				

					08-30
					
					554
					
				

			

		

		

			
				
微信小程序中在线使用iconfont字体图标

			
		

	



                

              
                



	

		

			

				
					
微信小程序项目引入iconfont

				
			

			

				

					Sakiaaa的博客
				

				

					12-10
					
					332
					
				

			

		

		

			
				
微信小程序项目引入iconfont
1.打开 iconfont官网，登录账号，找到想要的图标，鼠标移到它上面，点击最上方购物车添加入库：

2.头部购物车图标（从右往左数第三个）显示+1，表示入库成功，点击它查看详情

3.点击下方添加至项目栏

4.点击 加入项目 那一行最右边的文件夹，新建项目

4.项目命名，点击确定（图1），会自动进入项目（图2），点击font class下面的暂无代码，点此生成
图1：

图2：

5.点击生成的代码链接（图1），会自动打开新页面（图2），复制页面内所有的代码，打开

			
		

	



                


  
              

                


	

		

			

				
					
使用Iconfont矢量图标库的详解

					
最新发布

				
			

			

				

					baidu_28705493的博客
				

				

					08-21
					
					993
					
				

			

		

		

			
				
访问Iconfont官网：首先，打开Iconfont官网，在首页的搜索框中输入需要使用的图标名称。添加图标到项目：搜索结果出来后，可以选择将图标添加入库，也可以收藏或下载。点击右上角的购物车图标，会显示已添加入库的图标。将想要使用的图标添加至项目。若还未创建项目，则需要新建一个项目并将图标添加至该项目中。进入项目管理：图标添加至项目后，会自动跳转至该项目页面，也可以通过导航栏中的资源管理进入“我的项目”页面管理已添加的图标。修改图标名称：点击编辑按钮, 可以修改图标代码, 名称和Class名称Iconfon

			
		

	





	

		

			

				
					
微信小程序使用字体图标

					
热门推荐

				
			

			

				

					生如夏花 炫至茶靡
				

				

					07-03
					
					8万+
					
				

			

		

		

			
				
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。
第一步：下载需要的字体图标
进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为：
搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。



			
		

	



		

			
		



	

		

			

				
					
微信小程序引入字体图标

				
			

			

				

					qq_43792295的博客
				

				

					07-15
					
					172
					
				

			

		

		

			
				
如下图获取样式代码链接，点击【Font Class】–》【查看在线链接】–》【点击复制代码】上一步中点击确认后会自动跳转到当前项目，或者是点击【资源管理】–》【我的项目】在具体页面的wxss中使用。在全局wxss文件中引入。使用的样式中的如下属性。

			
		

	





	

		

			

				
					
微信小程序使用字体图标——链接引入

				
			

			

				

					欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
				

				

					07-13
					
					3047
					
				

			

		

		

			
				
【代码】微信小程序使用字体图标——链接引入。

			
		

	





	

		

			

				
					
在小程序中使用iconfont

				
			

			

				

					DargonWisdom的博客
				

				

					08-10
					
					3895
					
				

			

		

		

			
				
小程序使用iconfont的使用

			
		

	





	

		

			

				
					
小程序引入iconfont字体

				
			

			

				

					sinat_38992528的博客
				

				

					08-06
					
					239
					
				

			

		

		

			
				
第一步 下载自己喜欢的图标

我用的是阿里巴巴矢量图库，在Iconfont找到自己喜欢的图标，加入购物车，如图：



加入购物车

添加至项目，如图：



image.png

下载至本地，如图：



image.png

解压,如图：



image.png



第二步 转换ttf

因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base6...

			
		

	





	

		

			

				
					
详解mpvue小程序中怎么引入iconfont字体图标

				
			

			

				

					10-17
				

			

		

		

			
				
在开发基于mpvue框架的小程序时，引入iconfont字体图标是一项常见的需求，因为这样可以方便地使用丰富的矢量图标资源。下面将详细讲解如何在mpvue小程序中引入iconfont字体图标。  首先，我们需要访问阿里巴巴矢量...

			
		

	





	

		

			

				
					
微信小程序--引入iconfont

				
			

			

				

					You_wil_see的博客
				

				

					10-08
					
					266
					
				

			

		

		

			
				
首先呢，我们先进入阿里的iconfont官方页面：iconfont-阿里巴巴矢量图标库

在其中选入自己选好的图标，点击右上角的购物车中，没注册的先注册，





之后点击font class，在点击获取在线链接，将整段链接复制到微信开发者小程序的一个文件中，我的是styles中的wxss文件，







之后便到全局样式文件app.wxss中导入刚刚的文件。



最后到pages中的demo首页导入icon font.wxss中的类就可以了。






...

			
		

	





	

		

			

				
					
微信小程序引入iconfont

				
			

			

				

					qq_39920109的博客
				

				

					08-05
					
					2942
					
				

			

		

		

			
				
微信小程序如何引用阿里iconfont图标库？
1、进入阿里iconfont官网 https://www.iconfont.cn/；新建一个自己的项目，导入自己需要的icon。

2、将项目里的icon库下载至本地、解压。

3、打开https://transfonter.org/，来转换 ttf 。
点击Add fonts，上传iconfont.ttf。

4、勾选上 Family support , Base64 encode, TTF 三个选项, 点击 “Convert” 进行转化, 然后 “Down

			
		

	





	

		

			

				
					
微信小程序-引入iconfont图标

				
			

			

				

					森海北屿 ღ
				

				

					03-20
					
					502
					
				

			

		

		

			
				
在微信小程序开发过程中想要使用阿里巴巴图标库中更为丰富的图标素材，需要引入iconfont图标库，具体操作如下：

点击进入iconfont官网，注册账号新建项目，这部分不做赘述；
新建项目成功后如下所示：

3.将项目下载至本地，解压后放在小程序项目目录下，这里我放在新建的assets文件夹下。

4.在微信小程序中新建一个iconfont.wxss文件，并将上图iconfont.css中的代码复制进去。

5.在app.wxss中引入图标库样式，注意文件路径。

6.使用时添加类名即可显示所需要的图标


			
		

	





	

		

			

				
					
微信小程序引入iconfont图标

				
			

			

				

					新疆程序猿的角落
				

				

					01-06
					
					603
					
				

			

		

		

			
				
微信小程序引入iconfont图标

			
		

	





	

		

			

				
					
微信小程序引入 iconfont 图标

				
			

			

				

					dark_cy的博客
				

				

					06-20
					
					784
					
				

			

		

		

			
				
　　下图的左上角有三种模式，Unicode、Font class 和 Symbol。选中 Font class 模式，然后点击【点击复制代码】下面的链接，将链接里面的代码（如图二）复制到项目里即可。
　　之前我都是用的 Font class 模式，但是上星期 iconfont 官网维护之后，我加了新图标更新代码的时候弹出了下面的提示，说要下载至本地使用。　　小程序上我还没用过本地的 iconfont 图标，于是我就去百度怎么引入，有些博客说小程序不支持加在本地字体文件，要转成 Base64 的格式引入才可以

			
		

	





	

		

			

				
					
微信小程序中引入iconfont图标

				
			

			

				

					x的博客
				

				

					02-06
					
					3747
					
				

			

		

		

			
				
1.从阿里巴巴矢量图标库中把需要的图标下载到本地

2.把iconfont.css里的代码复制到().wxss中



@font-face {

font-family:  "iconfont";

src: url('iconfont.eot?t=1517890814177'); /* IE9*/

src: url('iconfont.eot?t=1517890814177#iefix')...

			
		

	





	

		

			

				
					
微信小程序 -- 引入 iconfont 矢量图标（Font class ）

				
			

			

				

					m0_72951245的博客
				

				

					12-01
					
					745
					
				

			

		

		

			
				
微信小程序引入 iconfont 矢量图标（Font class ）;

			
		

	





	

		

			

				
					
小程序导入iconfont

				
			

			

				

					wangjiali123123的博客
				

				

					09-01
					
					306
					
				

			

		

		

			
				
先去官网下载好，然后在项目中创建一个scss，导入下载的文件中的那个css到新创建的scss，最后app.wxss@import然后就能用了。

			
		

	





	

		

			

				
					
MPVue小程序中iconfont字体图标引入教程

				
			

			

				

					
				

			

		

		

			
				
在MPVue小程序中引入iconfont阿里巴巴矢量图标库的方法分为本地...要在MPVue小程序中引入iconfont字体图标，确保熟悉这两种引入方法，注意文件格式转换和CDN使用的优势与局限性，以及对字体文件管理和维护的最佳实践。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值