webpack打包中使用字体图标iconfont

最新推荐文章于 2022-03-28 10:25:42 发布
最新推荐文章于 2022-03-28 10:25:42 发布
阅读量885 收藏
点赞数
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46187747/article/details/104604931
版权
本文介绍了在webpack打包项目中如何使用字体图标iconfont，包括从iconfont官网获取图标，配置webpack的url-loader和file-loader，以及在项目中引用和修改iconfont.css的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webpack打包中使用字体图标iconfont

前言

这里天作案例的时候，发现有些地方用字体图标会比较舒服，
但是加上webpack，要配置loader

使用

  1. 首先去iconfont官网去选择自己喜欢的图标，喜欢的图片点购物车图标
    在这里插入图片描述

  2. 选择的差不多的时候，点击右上角的购物车图标，会出现这个页面
    在这里插入图片描述

  3. 点击Download Code，就会开始下载

  4. 下载完后解压出来得到
    在这里插入图片描述

  5. 只有这些是有用的
    在这里插入图片描述

  6. 配置loader,

    • 下载url-loader和file-loader
    • 在webpack里添加如下配置

                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    

      

        

            

              
                
                  青空–Air
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
webpack处理字体图标资源08--webpack入门学习

				
			

			

				

					g841805的博客
				

				

					06-22
					
					1055
					
				

			

		

		

			
				
打开 index.html 页面查看效果。

			
		

	



                

            
              



	

		

			

				
					
webpack中使用iconfont字体图标的方法

				
			

			

				

					08-27
				

			

		

		

			
				
下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



              


  
              

                


	

		

			

				
					
Webpack项目中引入IconFont图标

				
			

			

				

					pengjunlee的博客
				

				

					08-27
					
					3448
					
				

			

		

		

			
				
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。

IconFont官网：https://www.iconfont.cn/

1、打开IconFont官网并登陆自己的账户。

2、挑选你喜欢的图标，添加入库。



3、进入购物车查看已挑选的图标，下载代码。



4、将下载后的图标代码解压，文件如下。



5、将解压文件复制到项目的 src/assets 目录下。...

			
		

	





	

		

			

				
					
iconfont-cli 告别批量打包到项目

				
			

			

				

					爱前端灬不爱恋爱的博客
				

				

					03-28
					
					1754
					
				

			

		

		

			
				
相关插件
mini-program-iconfont-cli
react-native-iconfont-cli
uni-app-iconfont-cli
vue-iconfont-cli
react-iconfont-cli
flutter-iconfont-cli
taro-iconfont-cli
这里我们以 vue项目和react-native项目为例子
vue npm的地址
react-native的地址
这两个地址有对应的教程
生成配置文件
npx iconfont-init

这样会在项目生成

			
		

	



		

			
		



	

		

			

				
					
webpack使用url-loader处理字体图标

				
			

			

				

					想快快长大的博客
				

				

					08-07
					
					308
					
				

			

		

		

			
				
今日发现无法正常渲染字体图标 见cmd控制台报错 一见便知
      如何使用呢 cnpm i url-loader -D 安装完成后 在webpack.config.js中引入
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},
      再次配置图标
      
        
 ...

			
		

	





	

		

			

				
					
vue-cli 该如何正确打包iconfont？

				
			

			

				

					weixin_30663391的博客
				

				

					06-20
					
					288
					
				

			

		

		

			
				
其实这种问题应该问google的：
got wrong bootstrap font path after building · Issue #166 · vuejs-templates/webpack<img src="https://pic4.zhimg.com/v2-1ed15a79cf9b625f99c90863ed81485b_b.png" dat...

			
		

	





	

		

			

				
					
解决vue-cli项目webpack打包后iconfont文件路径的问题

				
			

			

				

					10-18
				

			

		

		

			
				
然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法正常显示图标。  在描述的问题中，我们看到打包后的字体文件位于`static/fonts`...

			
		

	





	

		

			

				
					
vue.js iview打包上线后字体图标不显示解决办法

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue.js项目中，特别是使用了iView UI库的情况下，开发者可能会遇到打包上线后字体图标不显示的问题。这个问题通常是由于资源路径配置不正确或打包过程中处理CSS样式的方式导致的。以下是一些解决此问题的方法：  1...

			
		

	





	

		

			

				
					
webpack中使用url-loader处理字体文件

				
			

			

				

					ADLF
				

				

					01-04
					
					2372
					
				

			

		

		

			
				
使用bootstrap的图标

main.js导入bootstrap



配置文件中添加



			
		

	





	

		

			

				
					
在Webpack中用url-loader处理图片和字体的问题

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了在Webpack中用url-loader处理图片和字体的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

			
		

	





	

		

			

				
					
vue引入本地iconfont图标字体

				
			

			

				

					lilongwei4321的博客
				

				

					09-11
					
					3665
					
				

			

		

		

			
				
1、下载iconfont图标至本地



2、项目中新建文件夹，并把以下文件放到文件夹中



3、打开app.vue页面，import引入对应的地址


<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export

			
		

	





	

		

			

				
					
vue引入iconfont阿里字体图标库以及报错解决

				
			

			

				

					bangpu6497的博客
				

				

					02-02
					
					1778
					
				

			

		

		

			
				
下载阿里的字体图标库文件，放在\src\assets\font文件夹下面。
安装style-loader,css-loader和file-loader(或url-loader) ,记得--save-dev
webpack的配置文件中添加：

{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/...

			
		

	





	

		

			

				
					
webpack 加载 iconfont字体图标

				
			

			

				

					yaoyyl的博客
				

				

					05-31
					
					8367
					
				

			

		

		

			
				
1. 使用之前要安装url-loader、file-loader


2. 修改webpack的配置文件的loaders配置




3. 修改css引用路径（注意要把引号去掉，路径前加上.）

			
		

	





	

		

			

				
					
webpack中如何使用iconfont字体图标

					
热门推荐

				
			

			

				

					沉迷学习 日渐消瘦
				

				

					12-09
					
					2万+
					
				

			

		

		

			
				
入坑webpack，开始加载一些图片、js文件什么的都没有报错，今天正好下了iconfont字体，就出现了错误，所以这里分享一下怎么在webpack中使用iconfont。1.修改css中字体文件路径我把css和字体文件放在同级目录下打开iconfont.css文件，原本的字体文件引用路径是用的css的方式，即下面图片中所示的
同级目录：直接用文件名
上一级目录：../ 
但是，我们是在webpac

			
		

	





	

		

			

				
					
使用vue-cli搭建项目的使用，需要引入font-icon文件，报错的解决办法

				
			

			

				

					Smile_Monica的博客
				

				

					01-28
					
					5063
					
				

			

		

		

			
				
报错内容是这样的


于是乎，我就找到了我引入文件的地方，路径是这样写的：




我的项目结构是这样的：




按理说，应该是没毛病呀？？？
我就是在网上搜了好多资料，觉得是和webpack配置相关，但是又不知道改什么。因为我是用vue-cli搭建的项目，好多东西都配置的差不多了，所以不需要改变什么，但是我还是去找了他的相关配置，在build->webpack.ba

			
		

	





	

		

			

				
					
webpack使用css-loader?sourceMap导致font(eot、ttf)等无法加载问题

				
			

			

				

					u010576965的专栏
				

				

					02-15
					
					6477
					
				

			

		

		

			
				
使用webpack的css-loader?sourceMap时，在.scss文件中@font-face字体后，经过webpack编译后，导致无法显示字体，原因大概是由于url的问题，有兴趣的同学请参考http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#3413380

			
		

	





	

		

			

				
					
2020.09.20阿里iconfont用法,配上react项目中使用

				
			

			

				

					weixin_30980795的博客
				

				

					09-20
					
					559
					
				

			

		

		

			
				
不废话，阿里官网文档
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code
web端使用：
unicode引用
unicode是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版iconfont支持多色图标

			
		

	





	

		

			

				
					
webpack4打包iconfont

				
			

			

				

					YMX2020的博客
				

				

					08-26
					
					996
					
				

			

		

		

			
				
webpack4打包iconfont
在日常开发中，项目中引入一些图标是十分常见的事情，那么遇到这样的图标，我们在打包项目的时候该如何配置webpack呢？

首先我们需要一个loader


file-loader



需要到iconfont矢量图标库下载相应的图标
如果还不知道怎么从阿里矢量图标库下载并且应用下载的图标，可以看我之前写过的一篇文章iconfont使用的三种方式


把下载好的矢量图标文件夹，放项目的font文件夹



在index.css文件中引入iconfont.css文件


/

			
		

	





	

		

			

				
					
【webpack】快速笔记4 -- loader（字体图标）

				
			

			

				

					Umbrella_Um的博客
				

				

					09-01
					
					451
					
				

			

		

		

			
				
如何抽取有用的字体文件呢？
去www.iconfont.cn去下载寻找字体图标，下载到本地并且解压：

抽取这五个文件（有时没有woff2就不用管）：
eot || svg || ttf || woff || woff2
然后复制 iconfont.css 里面的css样式，只 src: url('./font/iconfont.eot?t=1566835316127') 注意要引入对应的eot,...

			
		

	





	

		

			

				
					
iconfont字体图标重名如何解决

					
最新发布

				
			

			

				

					01-19
				

			

		

		

			
				
### 解决 Iconfont 字体图标命名冲突的方法  当遇到多个 `iconfont` 文件中的字体和样式命名相同的情况时，可以通过以下几种方式来有效避免命名冲突：  #### 方法一：重命名类前缀 通过修改 CSS 类的前缀，可以轻松...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值