关于阿里iconfont字库 引用到Vscode失败

原创 已于 2022-10-12 23:02:06 修改 · 542 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2022-10-12 23:00:54 首次发布
本文介绍如何正确使用 IconFont 图标字体资源。主要内容包括通过 link 属性引用 iconfont.css 文件的方法，确保 Base64 编码选项已启用的重要性，以及如何解决由此导致的问题。通过调整配置并重新下载文件，可以确保图标正常显示。

我引用进代码中使用的是利用 link属性来引用 下载后的 iconfont.css （注意路径不要写错了）

自己要去看看自己项目设置中的 Base64 选中没有，没有选中的话大概率会出问题

 

 （没有选中Base64的）先选中，然后保存，重新下载和引用 iconfont.css 文件

 注意 inconfont icon- 这是东西是写死的，后面的是类名 ，打开demo_index.html可以看见图标的类名（其实类名就是图标的中文拼音）

pilgarlic_man
关注
vue系列开发1---使用阿里iconfont字体图标
Cool的博客
08-13 2750
1.在阿里图标http://iconfont.cn中找到自己需要的图标添加到购物车，或者添加自己的字体项目。下载 2.解压使用这4个文件 3.增加iconfont.less文件，同一目录下 //url为字体路径 @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1491967237541'); /* IE...
通过复制字库文件到W25Q16的虚拟U盘来安装字库。
03-05
本程序是通过stm32f103开发板将W25Q16模拟成2个U盘（各1M）,可以通过复制字库文件到第二个U盘来安装字库。 1.第二个U盘不用每次进行格式化 2.简单判断字库位置有无数据，U盘显示“字库空.txt”,有数据显示"安装...
在vscode中使用iconfont阿里字体图标
qq_47548037的博客
05-07 3005
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/ 首页： 2.从中选择你喜欢的图标库 3. 点击加入购物车，在购物车中可以查看自己想要的图标 4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字 5.直接点击下载至本地，下载完成后解压缩...
vue使用阿里字体教程（引入外部字体）
YUE
03-14 2988
3.在vue项目中src–>assets–>fonts中放入刚下载的两个文件(如果没有我这样的目录自己建一个就行)打开 build --> webpack.prod.conf.js。PS：关于遇到build到服务器后woff字体失效问题。4.fonts中新建font.css文件，引入字体。5.随便哪里去用就完事了（举例是类选择器）改成 extract: false。把 extract : true。4.main.js中引入。1.点击字体库选择字体。
【踩坑】iconfont使用异常bug
weixin_46020146的博客
07-22 337
【踩坑】iconfont使用异常bug
vscode提交代码报错
Node.js安装报错 - npm -v 查看版本无效
07-07 912
平时用vscode习惯了,修改的文件,点击加号添加报错 解决办法:使用git指令 1.git status 查看代码修改 2.cd 路径 比如说要提交的文件路径是:static/new/css/kanban.css cd static/new/css git add kanban.css 3.git add 文件/文件夹名称 4.git commit -m “描述信息” [注意:描述信息不添加有可能提交不成功] 5.git pull [如果当前只有一个分支可省略] 6.git push [git pus
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
weixin_46409887的博客
09-28 1万+
1.登录阿里图标官网 2.注册自己的账户，创建项目 3.加入自己使用的图标，加入购物车 4.选中项目 5.选中引入方式: 第一种.使用统一码 Unicode 第二种.使用class Font class 使用步骤: 第一种: 1.点击Unicode 2.创建一个css文件(iconfont.css) 粘贴到css文件中 3.html中link引入 <link rel="stylesheet" href="../css/iconfont.css"> 4.使用 <i class=
精选资源
物联网嵌入式开发-ESP32通过外置SD卡汉字字库实现屏幕显示汉字（ESP-IDF +VSCode编程）.rar
04-17
1、嵌入式物联网ESP32项目实战开发。例程经过精心编写，简单好用。 2、代码使用Visual Studio Code开发，C语言编程。例程在ESP32-S3上运行。若在其他型号上运行，请自行调整。 3、如果接入其他传感器，请查看发布的...
STM32串口发送字库文件到w25xx的FLASH.7z
11-30
自己画的STM32板子上设计了一个w25xx的外部储存器，在某宝上买了一个3.2寸的屏，我用外部储存器当字库，可惜么有烧录工具，也没TF卡，于是各种上网，各种优快云,搞出来这么一个串口发送GB2312字库文件到w25xx FLASH中...
ts3.rar_mtk 字库_ts3_ts3 点阵字库_visual c_字库
07-14
点阵字库生成器, 可以生成mtk中使用的BDF文件
iconfont图标不显示的解决方式
m0_57342122的博客
04-18 3209
iconfont图标不显示的解决方式
iconfont的引入
weixin_45974291的博客
09-15 515
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引入iconfont字体
小苏(º﹃º )的博客
05-10 2443
去
VSCode图标显示异常
bit的博客
10-30 8969
其实异常的原因很简单,只是因为在/usr/share/applications/下的code.desktop中对ICON的错误引用路径,默认的路径只有一个code,显然不能指向一个图片文件,对code.desktop文件的分析知道VSCode的安装路径是/usr/share/code,在路径下寻找,最终在/usr/share/code/resources/app/resources/linux/下...
阿里巴巴矢量图标（iconfont）添加后显示不出来的解决办法
热门推荐
weixin_42617604的博客
10-07 3万+
问题: 添加阿里巴巴矢量图标（iconfont）后页面内能看到但是显示不出来： 解决办法: 后面发现地址栏是file://文件打开： 这样是不行的，要使用 iconfont 要在本地的服务器打开才能看到 用git bush进入index.html的文件夹，然后输入 http-server 打开服务器： 再地址栏输入：127.0.0.1:8080 就能看到了 ...
字体图标的引入
赵佳佳的博客
08-07 757
一、下载图标 百度搜索“iconfont”，进入icon font官网。 链接：icon font官网 选择需要引入的图标，点击“购物车”图标，添加入库。 3.点击右上角“购物车”图标，弹出购物车窗口，选择“添加至项目”。 4.弹出“添加项目”窗口 5.点击右上角的“文件夹图标”，添加一个新项目，点击“确定”，显示添加成功。 6.选择font class，点击右侧的“查看在线链接”。 7.弹出“代码”。 8.点击“复制代码”，打开一个新标签页，复制代码地址，打开.css的源代码。 二、引入
解决vscode没有文件图标（亲测有效）
wangzhen12138的博客
07-28 1万+
第一步：打开vscode 第二步：鼠标滑倒文件那一栏 第三步：选择首选项 第四步：选择文件图标主题 可以选择特定的插件 这里推荐两个 1.Material Icon Theme 2.vscode-icons-mac
Vue 项目webpack打包图标不显示
Amelia_Liu的博客
04-25 2315
第一次用VSCode进行打包一个VUE项目 结果放在直接将dist下面的项目拷贝到spring项目下面一运行发现我的阿里云ico图标都不见了,变成了方框,在苹果方框都不显示 图中的方框都为ico图标 我一检查我在VSCode中都是正常的,唯一差异就是打包出了问题,所以百度...(哈哈 首先百度 因为谷歌太多英文有点费脑) 然后看到这样一个回答 启发到我了,路劲问题 我没问前端打...
阿里图标库新增iconfont字体图标
MadSnail00的博客
12-14 820
阿里图标库新增iconfont字体图标
识别到了sd卡但是更新字库失败
最新发布
03-28
<think>好的，我现在需要帮助用户解决“识别到了SD卡但是更新字库失败”的问题。首先，我得理解用户的问题场景。用户可能在某种设备上，比如打印机、嵌入式系统或者其他需要更新字库的设备，插入了SD卡，设备能够识别到SD卡的存在，但在尝试更新字库时失败了。接下来，我需要分析可能的原因，并提供逐步的解决方案。 首先，我应该考虑SD卡本身的问题。比如，SD卡是否格式化为正确的文件系统？设备可能只支持特定的格式，比如FAT32，而不是exFAT或者NTFS。另外，SD卡的容量是否过大，超过设备支持的最大容量？有些老设备可能不支持大容量SD卡。 接下来，文件方面的问题。用户是否将字库文件放在正确的目录下？设备可能要求字库文件必须放在SD卡的根目录或者某个特定文件夹中。此外，文件格式是否正确？字库文件可能需要特定的扩展名，如.ttf、.otf或者其他专有格式，用户是否使用了正确的文件类型？还有文件名是否正确，设备可能对文件名有严格的要求，比如必须全大写或小写，或者不含特殊字符。 然后是设备兼容性问题。设备的固件版本是否支持当前的字库文件？可能需要更新设备的固件。另外，设备对字库的版本或大小是否有限制？有些设备可能无法处理过大的字库文件。 硬件问题也需要考虑。SD卡插槽是否有接触不良的情况？虽然设备识别到了SD卡，但接触不良可能导致读取文件时出错。此外，SD卡本身是否有损坏，或者设备读取SD卡的模块存在故障？ 软件或系统限制也是一个可能性。设备的存储空间是否不足，导致无法完成字库更新？或者设备有写保护开关，导致无法写入数据到SD卡？ 接下来，我需要给出逐步的解决方案，帮助用户排查问题： 第一步，检查SD卡格式和容量。确认SD卡格式为FAT32，因为很多嵌入式设备只支持这种格式。如果SD卡容量过大（比如超过32GB），尝试使用较小容量的卡。 第二步，验证字库文件。确保文件放在正确的位置，比如根目录。检查文件名是否符合要求，没有特殊字符，且扩展名正确。如果可能，下载官方提供的字库文件进行测试，或者确认现有文件没有损坏。 第三步，更新设备固件。查看设备是否有最新的固件版本，升级后再尝试更新字库。 第四步，检查硬件连接。清洁SD卡的金手指，换一个卡槽或设备测试，排除接触问题或卡本身的故障。 第五步，检查存储空间和写保护。确保SD卡有足够空间，并且写保护开关未启用。 第六步，查阅设备手册或联系技术支持。如果以上步骤无效，可能需要更专业的帮助。 在回答过程中，要注意使用用户易懂的语言，避免技术术语过多，同时结构清晰，分点说明。需要确保用户能够按照步骤逐步排查，并给出每个步骤的具体操作方法。比如，在检查SD卡格式时，可以指导用户在电脑上查看属性，或者使用工具格式化。在验证字库文件时，建议用户核对文件名和路径，或者重新下载文件。 另外，可能需要提醒用户备份SD卡中的数据，以防在格式化或操作过程中丢失重要文件。同时，如果用户使用的是特定品牌的设备，建议参考该品牌的官方文档，因为不同设备可能有不同的要求。 最后，总结可能的原因和解决方案，帮助用户系统地解决问题，避免遗漏可能的故障点。整个过程需要逻辑清晰，步骤明确，让用户能够按图索骥，逐一排除问题。</think>### 识别到SD卡但更新字库失败的排查指南 以下是可能的原因及逐步解决方案： --- #### **1. 检查SD卡格式与容量** - **原因**：设备可能仅支持特定文件系统或容量限制。 - **解决方法**： - **格式要求**：将SD卡格式化为 **FAT32**（大多数嵌入式设备的兼容格式）。 （操作：右键SD卡 → 格式化 → 选择FAT32 → 快速格式化） - **容量限制**：尝试使用 **≤32GB** 的SD卡（部分老设备不支持大容量卡）。 --- #### **2. 验证字库文件** - **原因**：文件位置、格式或内容错误可能导致更新失败。 - **解决方法**： - **文件路径**：将字库文件直接放在 **SD卡根目录**（不要嵌套文件夹）。 - **文件命名**：使用全英文/数字名称（如 `font.ttf`），避免特殊符号或中文。 - **文件完整性**： - 核对字库文件扩展名（如 `.ttf`、`.bin` 等）。 - 从官方渠道重新下载字库文件，确保未损坏。 --- #### **3. 检查设备兼容性** - **原因**：设备固件或硬件限制可能影响字库更新。 - **解决方法**： - **升级固件**：进入设备设置 → 检查固件更新 → 安装最新版本。 - **字库大小限制**：确认字库文件未超过设备支持的最大体积（参考说明书）。 --- #### **4. 排除硬件问题** - **原因**：SD卡或卡槽接触不良。 - **解决方法**： - 用酒精棉签清洁SD卡金属触点。 - 更换另一张SD卡测试（建议使用品牌正品卡）。 - 尝试将SD卡插入其他设备，验证能否正常读写。 --- #### **5. 检查存储空间与写保护** - **原因**：SD卡空间不足或被写保护。 - **解决方法**： - 确保SD卡剩余空间 > 字库文件体积的 **2倍**。 - 检查SD卡侧面的 **写保护开关**（滑动至解锁位置）。 --- #### **6. 其他注意事项** - **供电问题**：更新过程中避免断开电源或拔出SD卡。 - **系统权限**：部分设备需进入“工程模式”或输入密码才能更新字库（参考说明书）。 --- ### 总结流程图 ``` SD卡识别成功 → 更新失败 ├─→ 检查SD卡格式（FAT32） ├─→ 验证字库文件（路径/名称/完整性） ├─→ 升级设备固件 ├─→ 更换SD卡或清洁卡槽 └─→ 联系官方技术支持 ``` 如果以上步骤无效，请提供设备型号和字库文件类型，以便进一步分析！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值