如何使用Visual Studio Code引入iconfont字体

最新推荐文章于 2024-04-19 17:33:53 发布
最新推荐文章于 2024-04-19 17:33:53 发布
阅读量2.2k 收藏 11
点赞数 1
分类专栏： javascript 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45850095/article/details/116302023
版权
本文介绍了如何在Visual Studio Code中引入iconfont图标，包括创建阿里巴巴矢量图标库账号，选择并添加图标，以及通过Unicode和Font class两种方式将图标引入到HTML页面中，并提供了详细的步骤和代码示例。
摘要由CSDN通过智能技术生成

1.图标添加方式

一.首先，我们需要创建一个阿里巴巴矢量图标库账号（可以用微博账号登录）。
二.将我们需要的图标点击，添加到购物车中
在这里插入图片描述
三.点击右上角的购物车
在这里插入图片描述
四.点击添加至项目(如果没有项目，就自己创建一个)
在这里插入图片描述
在这里插入图片描述

接下来将讲解，如何将图标引入Visual Studio Code中。

2.两种引入方式

一.使用Unicode引入

1.点击下载至本地
在这里插入图片描述
2.将压缩包解压并将文件添加到Visual Studio Code对应文件中

最低0.47元/天 解锁文章
小苏(º﹃º )
关注
专栏目录
Qt开发经验总结
草上爬的博客
12-02 8409
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
vscode-icon-fonts:流行图标字体的代码片段，例如“真棒字体”，“爱奥尼克斯”，“雕文”，“ Octicons”，“材质设计图标”等等！
04-27
Visual Studio代码的图标字体 各种图标字体的代码片段（）。 该软件包也可用于和 。 屏幕快照从Sublime Text包中切出，但是您明白了 安装 扩展市场 启动快速打开，粘贴以下命令，然后按Enter ext install idleberg.icon-fonts 命令行界面 安装了，可以使用以下命令来安装扩展： $ code --install-extension idleberg.icon-fonts 打包扩展 从下载打包的扩展，然后从命令行安装它： $ code --install-extension path/to/icon-fonts- * .vsix 或者，您可以从下载打包的扩展名，或使用ovsx命令行工具安装它： $ ovsx get idleberg.icon-fonts 克隆存储库 转到您的Visual Studio Code扩展目录：
在vscode中使用iconfont阿里字体图标
qq_47548037的博客
05-07 2322
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/ 首页： 2.从中选择你喜欢的图标库 3. 点击加入购物车，在购物车中可以查看自己想要的图标 4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字 5.直接点击下载至本地，下载完成后解压缩...
iconfont的引入
weixin_45974291的博客
09-15 420
1.打开iconfont图标库，找到想使用的图标并添加到项目（建议将一个项目使用的图标放一个项目中） 2.点击生成代码，复制代码链接浏览器打开，全选并复制，在vscode中新建一个icon.css文件，将复制的代码粘贴过来 3.使用 1.导入使用link标签<link rel=“stylesheet” href=“icon.css”》 2.在body中插入i标签或span标签，class为’iconfont icon-xxx’ (到图标库把想引入的图标复制代码，为icon-xxx) 3.可以通过 .
Visual Studio Code怎么自动引入相关模块?
热门推荐
zh0623的博客
07-22 1万+
1.打开Visual Studio Code软件, 点击左侧扩展图标或者用Command+shift+X快捷键,显示安装扩展的页面 2.在输入框输入需要的扩展(插件)auto import,回车搜索后,点击安装按钮安装扩展(插件),等待安装完成 3.安装完成以后,输入相关内容,看到如图提示内容后点击回车就可以了 注意: 如果第一次用AntDesign的<card>组件时，是不会有自动导入提示的，所以第一次导入要自己写import {Card} from 'antd'; 在.
vscode-icons 插件
03-09
vscode-icons 插件
如何在项目中使用阿里巴巴矢量图标
03-27
`.vscode`目录可能包含了Visual Studio Code的工作区设置，对于开发者来说，这有助于保持代码编辑器的配置一致性。 在实际项目中，为了优化加载速度，可以选择性地引入必要的图标，而不是整个图标库。可以通过在线...
阿里矢量图标(字体图标)
m0_73782968的博客
02-26 420
随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。【H5页面、微网页、微站、wap站、webAPP】如:京东商城手机版，淘宝触屏版，苏宁易购手机版相关阅读：WebApp与Native App的区别？在高端智能手机系统中有两种应用程序：一种是基于本地(操作系统)运行的APP;
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6482
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
visual studio与visual studio code在Windows环境下分别导入字体样式
喝咖啡的猫的博客
08-31 3176
文章目录前言一、visual studio是什么？1.visual studio导入字体二、visual studio code是什么?1.visual studio code导入字体。结束语 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、visual studio是什么？ 介绍：Visual Studio（简称VS）是一个集成的开发环境，相对来说比较完整，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。 如果初学编程（控制台）用vs，
关于阿里iconfont字库 引用到Vscode失败
pilgarlic_man的博客
10-12 411
注意 inconfont icon- 这是东西是写死的，后面的是类名 ，打开demo_index.html可以看见图标的类名（其实类名就是图标的中文拼音）我引用进代码中使用的是利用 link属性来引用 下载后的 iconfont.css （注意路径不要写错了）（没有选中Base64的）先选中，然后保存，重新下载和引用 iconfont.css 文件。自己要去看看自己项目设置中的 Base64 选中没有，没有选中的话大概率会出问题。
字体图标的引入
赵佳佳的博客
08-07 697
一、下载图标 百度搜索“iconfont”，进入icon font官网。 链接：icon font官网 选择需要引入的图标，点击“购物车”图标，添加入库。 3.点击右上角“购物车”图标，弹出购物车窗口，选择“添加至项目”。 4.弹出“添加项目”窗口 5.点击右上角的“文件夹图标”，添加一个新项目，点击“确定”，显示添加成功。 6.选择font class，点击右侧的“查看在线链接”。 7.弹出“代码”。 8.点击“复制代码”，打开一个新标签页，复制代码地址，打开.css的源代码。 二、引入
Visual Studio设置idea字体
最新发布
licy12306的博客
04-19 467
用惯了idea，一打开visual studio，emmm,非常不习惯，3.打开visual studio,菜单：工具->选项。1.下载JetBrain的Mono。好了，看上去舒服多了。
vue项目笔记（7）-使用iconfont
从零出发
08-09 1601
vue中iconfont的使用步骤 1、进入iconfont官网（http://www.iconfont.cn），进入“官方图标”，选择你所需要的图标，加入购物车。 2、进入“购物车”，将选择好的图标“添加至项目”，选择对应的项目，点击“确定”。 3、在项目中，点击“下载至本地”，解压缩，文件目录如下： 4、将字体文件及对应的iconfont.css文件复制到项目目录中，如...
【VS】visual studio 2019如何给应用程序增加图标
qq_43331089的博客
11-01 3122
选中其中的项目，右击资源文件—>添加—>资源。
Visual Studio 2010 默认字体的 Bug 及解决方法
09-25 484
如果你使用英文版Windows系统，Visual Studio 2010英文版的默认字体为漂亮的Consolas。由于很多中文程序对Unicode支持不好，导致很多时候我们需要将System Locale设置成中文。这时候再打开Vs 2010就会发现默认的字体已经变成了很难看的宋体，而字体设置里面确显示的是Consolas。只有重新将字体选为Consolas并按Ok之后编辑器字体才会变回...
CLION中使用Visual Studio编译工具乱码问题
qq_39947090的博客
11-29 1029
​解决CLION中使用Visual Studio编译工具乱码问题 解决Visual Studio编译utf-8编码文件问题
WPF引入iconfont图标显示不正常
随缘记录
11-09 1957
WPF引入iconfont图标不显示
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值