vue+Material 中Material的字体图标使用教程

最新推荐文章于 2024-06-10 09:51:34 发布
最新推荐文章于 2024-06-10 09:51:34 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： 前端 前端工程师 文章标签： vue Material Material icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38514634/article/details/88392978
版权

vue+Material 中Material的字体图标使用教程

问题

我找了很久没有找到npm配置的包，官方提供的文档安装之后也没什么用
在这里插入图片描述
还是我才疏学浅，不会用吧，下载下来之后继续引入还是没有效果，在查阅了文档之后，终于实现了，下面就直接上教程吧

第一步：

在你的index.html上加入这个外部包（这个方法确实不好，但是我也着实是没有找到其他的方法了）
在这里插入图片描述

	<link rel="stylesheet" href="//fonts.lug.ustc.edu.cn/icon?family=Material+Icons">

或者在你的重置样式表中加入这段代码（其实就是这个外部链接的代码）


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  没错就是小白
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue-material-icons

				
			

			

				

					04-02
				

			

		

		

			
				
物质图标
Vue2材质设计图标，可轻松访问图标名称和类型。
如何通过npm安装
npm install -D @dbetka/material-icons
设置
添加为Vue插件
import MaterialIcons from '@dbetka/material-icons' ;
Vue . use ( MaterialIcons ) ;
 自己添加组件
import { AIcon , IconComputed , IconFonts } from '@dbetka/material-icons' ;
Vue . use ( IconFonts )
Vue . use ( IconComputed )
Vue . component ( AIcon . name , AIcon ) ; // component name is `a-icon`
 设置自己的组件名称
import {

			
		

	



                

              
                



	

		

			

				
					
vue-material-design-icons：材料设计图标作为Vue单个文件组件

				
			

			

				

					02-04
				

			

		

		

			
				
Vue材质设计图标组件
该库是Vue单文件组件的集合，用于呈现Material Design图标，该组件来自。 它还包括一些CSS，可帮助简化图标的缩放。
入门
安装套件
yarn add vue-material-design-icons
 要么
npm i vue-material-design-icons
 导入图标，并将其声明为本地组件：
 import MenuIcon from 'vue-material-design-icons/Menu.vue' ;
components: {
  MenuIcon ;
}
 要么
将其声明为全局组件：
 import MenuIcon fro

			
		

	



                


  
              

                


	

		

			

				
					
推荐开源项目：Vue Material Design Icon Components

					
最新发布

				
			

			

				

					gitblog_00020的博客
				

				

					06-10
					
					273
					
				

			

		

		

			
				
推荐开源项目：Vue Material Design Icon Components
项目地址:https://gitcode.com/robcresswell/vue-material-design-icons
项目介绍
Vue Material Design Icon Components 是一个强大的Vue.js库，提供了一系列基于单文件组件（SFC）的Material Design图标。这...

			
		

	





	

		

			

				
					
【自学Flutter】4.1 Material Design字体图标的使用(icon)

				
			

			

				

					技术宅-Nopi的博客
				

				

					06-24
					
					1057
					
				

			

		

		

			
				
4.1 Material Design字体图标的使用(icon)
1.源代码
import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext contex...

			
		

	



		

			
		



	

		

			

				
					
MaterialDesignIcons-Vue:材质设计图标Vue组件

				
			

			

				

					05-09
				

			

		

		

			
				
MaterialDesign-Vue
 在Vue组件中轻松使用MaterialDesignIcons。
安装
NPM
 要求此程序包进入您的项目： 
yarn add materialdesign-vue --save-dev
# or, using npm
npm install materialdesign-vue --save-dev
其他
将vue-mdi.min.js文件包含到您的项目中，将其导入并注册Mdi组件：
 < script src =" https://github.com/chteuchteu/MaterialDesignIcons-Vue/blob/master/dist/vue-mdi.min.js " > </ script >
 Vue . use ( Mdi ) ;
用法
< template>
    < mdi
        :mdi =" mdi

			
		

	





	

		

			

				
					
Vue 第三方字体图标引入 Font Awesome的方法

				
			

			

				

					12-10
				

			

		

		

			
				
**在Vue组件中使用Font Awesome图标**  引入样式后，你可以在Vue组件中直接使用Font Awesome的类名来显示图标。Font Awesome的图标类通常由两部分组成：`fa`基础类和具体的图标类。例如，如果你想显示"camera-retro...

			
		

	





	

		

			

				
					
饿了me字体图标库 私密 共学习使用

				
			

			

				

					12-01
				

			

		

		

			
				
3. **Vue.js**：Vue.js 项目中，使用饿了me字体图标库需要先将其引入到项目中，这可以通过npm或yarn进行安装。然后，在组件或全局样式表中引用字体文件，并设置相应的类名来显示图标。Vue的组件化特性使得图标可以在...

			
		

	





	

		

			

				
					
从命令行生成materialdesign图标

				
			

			

				

					08-08
				

			

		

		

			
				
在IT行业中，尤其是在前端开发领域，Material Design Icons（MDI）是一种广泛应用的图标库，它提供了大量的矢量图标，能够适应各种屏幕尺寸和分辨率。本文将深入探讨如何使用JavaScript从命令行界面生成Material ...

			
		

	





	

		

			

				
					
mdue：来自社区的Vue 3的5,400多种材料设计图标

				
			

			

				

					02-04
				

			

		

		

			
				
mdue Vue 3的。感谢上令人敬畏的人们，该库拥有超过5,400多个图标。 使用图标库@mdi/util将图标... 只需将图标导入到您的应用中即可使用。 该应用程序仅捆绑您使用的图标。 < template> < ab> </ ab></ template>< s

			
		

	





	

		

			

				
					
基于Vue开发的农作物病虫害识别前端源码+项目说明.zip

				
			

			

				

					12-28
				

			

		

		

			
				
字体图标库： Material Design Icons、Font-awesome 4.0 【备注】 主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java学习者。 也可作为课程设计、期末大作业。包含：项目源码、项目说明等，该项目可以...

			
		

	





	

		

			

				
					
包含1000多个material矢量图标的安卓图标库.zip

				
			

			

				

					09-25
				

			

		

		

			
				
包含1000多个material矢量图标的安卓图标库.zip,包含2000多个材质矢量图标的库，可以轻松用作可绘制视图或独立视图。

			
		

	





	

		

			

				
					
Material-UI FontIcon组件使用

				
			

			

				

					Keep It Simple, Stupid
				

				

					06-02
					
					3278
					
				

			

		

		

			
				
material-ui是一款优秀的react组件库，目前在github上Star数已经达到了25759个。其中FontIcon组件包含了900多个系统图标，但是在使用的过程中你会发现图标显示不出来，解决方法如下：
到这个地址https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY

			
		

	





	

		

			

				
					
如何在前端项目中使用icon图标 （iconfont和remixicon以及Materialicon）

				
			

			

				

					haodanzj的博客
				

				

					06-20
					
					2223
					
				

			

		

		

			
				
使用图标库的教程

			
		

	





	

		

			

				
					
Material + Icon的使用方法

				
			

			

				

					qq_34045989的博客
				

				

					04-06
					
					4043
					
				

			

		

		

			
				
文章来源: https://www.1117.work/article/104/article_detail/

1. 下载Icon+css文件http://fonts.googleapis.com/icon?family=Material+Icons

或者自定义demo.css文件 写入如下内容：


@font-face {
  font-family: 'Material Icons';
...

			
		

	





	

		

			

				
					
【Vuejs】1385- Vue3 中这样使用 Icon 更优雅

				
			

			

				

					油墨香^-^的博客
				

				

					07-19
					
					2659
					
				

			

		

		

			
				
这可能是目前最便捷、最合适的Icon使用方式了，特别是在Vue3中，等等，你以为它只是适用于Vue3？不，不要被标题欺骗，它支持等多种主流框架，同样，它也支持等多种主流构建工具。之所以标题中带有Vue3以及单纯是因为此文是以此背景下产生的，示例代码也是基于此。前端自习课每日清晨，享受一篇前端优秀文章。136篇原创内容公众号假如你并不是此环境也无碍，你依然可以看完此文，因为不同环境只是在配置上稍微有些不同，使用上是完全一致的，当然，最终是否使用取决于你自己的取舍！IconFontIcon去解析。......

			
		

	





	

		

			

				
					
material-ui_体验Material-UI

				
			

			

				

					weixin_26746861的博客
				

				

					07-18
					
					933
					
				

			

		

		

			
				
material-uiI have heard many great things about Material-UI the popular React.js framework. As stated in their about page: 我听说过Material-UI的流行React.js框架有很多很棒的东西。 如其关于页面所述 ： 
Material-UI started back in...

			
		

	





	

		

			

				
					
VUE 渲染性能优化

				
			

			

				

					cimo的博客
				

				

					12-25
					
					4010
					
				

			

		

		

			
				
initMaterialIcon () {
  // 获取图标 materialIcons 下划线格式命名集合
  for (const i in materialIconsSet) {
    this.materialIcons_key.push(this.toLowerLine(i))
  }
  let i = 0
  this.timer2 = setInterval(() => {
    this.group_md = this.group_md.concat(this.material

			
		

	





	

		

			

				
					
vue-quasar 使用图标方法

				
			

			

				

					luoliwoshang的博客
				

				

					06-21
					
					2512
					
				

			

		

		

			
				
vue-cli 版本 4.5.13
1.添加quasar到vue项目中
虽然quasar有自己的脚手架，但是在使用过程中，与平常开发vue项目会有许多不同，所以添加quasar框架到vue项目中,即可达到开发者希望的效果
$ vue add quasar  

接下来会在src下生成一个quasar.js的文件，此文件存放所有quasar框架的配置，我们的图标配置也应该存放在文件中

2.添加相应的图标库

quasar直接支持的库有Material Icons、Font Awesome、Ionicons、

			
		

	





	

		

			

				
					
vue+electron中在vue文件中使用electron api

				
			

			

				

					09-02
				

			

		

		

			
				
在Vue Electron中，在Vue文件中使用Electron API，你需要在Vue组件中引入Electron模块并使用它提供的API。

首先，在你的Vue组件中引入Electron模块，可以使用以下代码：
```javascript
const electron = require('electron');
const { ipcRenderer } = electron;
```

然后，你就可以在Vue组件的方法中使用Electron API了。例如，你可以使用ipcRenderer来与主进程进行通信：
```javascript
methods: {
  sendMessageToMainProcess() {
    ipcRenderer.send('message', 'Hello from Vue!');
  }
}
```

这里的`ipcRenderer`是Electron提供的一个API，它允许你与主进程进行异步通信。你可以使用`send`方法发送消息到主进程。

请注意，在使用Electron API之前，确保你已经正确安装了Electron依赖，并且你的应用已经成功创建了Electron的主进程和渲染进程。


			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值