阿里巴巴矢量图标库踩坑

最新推荐文章于 2024-01-26 14:18:51 发布
最新推荐文章于 2024-01-26 14:18:51 发布
阅读量530 收藏 1
点赞数
分类专栏： 笔记 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44194491/article/details/105680253
版权

今天在写一个login.html的网页的时候，图标无法显示


代码：
这是代码
在这里插入图片描述
解决：
1.将你的项目图标下载到本地
在这里插入图片描述
2.在你的编辑器中，引用就行了
在这里插入图片描述

效果：
在这里插入图片描述
这样就显示出来了

第二种方法：

直接引用

需要在你的link标签里加上https：
在这里插入图片描述
这样就可以用了

华夏(0.0)战火�
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
美食菜谱预览微信小程序源码分享
02-12
3. 图标库： [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork：用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，...
美食菜谱预览微信小程序源码
02-12
3. 图标库： [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork：用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，...
Iconfont-阿里巴巴矢量图标库（笔记）
小糖穿越火线
04-26 684
使用 用户在iconfont.cn可以下载，多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 注：图标下载在“我的项目”： 一、icon单个使用 下载格式包括：svg，png 二、使用 1、unicode引用 特点： 兼容性最好 支持按字体的方式去动态调整图标大小，颜色 不支持多色，单色的图标 注：sym...
使用iconfont 阿里巴巴矢量图标库
weixin_49393290的博客
11-22 174
是
Iconfont-阿里巴巴矢量图标库的使用
qq_45291805的博客
08-04 721
1.在iconfont图标库里面找到一个自己想要的图标——》加入购物车 2.在购物车中找到图标并加入项目（没有项目先新建项目，项目名与所需要引用的.html文件无关） 3.查看Font Class，并复制代码，在浏览器中打开得到一段代码 4.在VSCode里面新建一个.css文件，将浏览器中得到的代码粘贴进去并保存 5.在.html文件里面用link标签引入.css文件 （link rel=”stylesheet” href=”./test.css” ），引用一个i标签，将图标代码复制进去 （
【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!
最新发布
极客小俊
01-26 2474
国内功能很强大且图标免费内容很丰富的矢量图标库!
阿里巴巴矢量图标库（iconfont）使用（vue，小程序）
weixin_43677787的博客
01-12 667
1.阿里巴巴矢量图标库官网 https://www.iconfont.cn/ 2.搜索图标名称 3.找到图标–>鼠标移入后出现—>图片1–>点击加入购物车（图2）–>图3–>点击进入购物车–>点击添加到项目–>新建项目–>添加 4.点击Font class ->点击查看在线链接–>复制代码–>新打开网页复制进去代码 5.复制内容–>新建css文件（iconfont.css）–>粘贴–>修改–>url(‘
基于微信小程序实现家政预约附项目源码
07-10
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现运动荟小程序附项目源码
07-10
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
iconfont-阿里巴巴矢量图标库使用教程
张时贰的博客
12-27 1万+
iconfont-阿里巴巴矢量图标库使用教程 文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点： 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
iconfont-阿里巴巴矢量图标库的使用方法
woai_mihoutao的博客
03-21 1万+
官网:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具http://www.iconfont.cn 使用方法： 1.注册账号 2. 登录后可搜索自己想要的字体图标 3. 例如：搜索weibo 4.鼠标滑到自己想要的图标后，点击第一个购物车图形 5.可在右上方的搜索框搜索下一个自己想要的图标，并加入购物车。 6.选择完毕后，点击...
总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~
止水Itachi
06-11 5929
1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。 2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。 3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦 4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。 5、点开你的右上角购物车，选择“添加至项目”。 6、点击新建文件夹 7、随意命名，在这里我命名为“举例子”，然后确定。 8、未完待续，明天更新。。。 ...
微信小程序中使用iconfont阿里巴巴矢量图标
alpha_xiao的博客
07-03 2544
1.首先去https://www.iconfont.cn中选择项目需要的图片，并且加入到购物车。 2.在购物车中将图标---添加至项目 3.选择Unicode -----查看在线链接 4.复制代码，下载代码 5.解压代码压缩包编辑iconfont.css，将下面标注的内容替换为刚才复制的代码（红色框部分） 6.复制iconfont.css中的所有代码，粘贴至小程序ap...
初学前端-记使用阿里图库SVG图标不显示的解决方法
zxc1207893278的博客
08-23 1625
使用VUE3+Element-Plus做来制作前端界面，做到左侧菜单栏时遇到了一个困难，添加的SVG图标始终不显示，位置存在，图标的信息也没有问题，但是就是一直显示不出来。的提示在Main.js中导入了inonfont.js文件后正常显示import './assets/fonts/iconfont/iconfont.js'的错误，但是不理解，不知从何下手。原来都是做上位机程序的第一次接触前端这种，感觉着实有些吃力，还有继续努力呀。其实在调试时浏览器中也报了。
阿里巴巴矢量图标库使用步骤
小瑾沐晚风的博客
01-18 1万+
1.登陆官网，选择需要的图标，将其添加至项目，然后下载至本地。 2.解压文件。 3.在工程目录下新建CSS文件夹，在CSS文件夹之后新建iconfont文件夹，并且将下面四个文件复制在CSS/iconfont文件夹之下。   4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下，与iconfont文件夹在同一层。 5.至此，目录如下： 6.双击打开icon...
Iconfont-阿里巴巴矢量图标库 用 github账户无法登录
weixin_44552512的博客
12-09 9702
今天跟往常一样登陆阿里巴巴矢量图标库，突然提示： There have been several failed attempts to sign in from this account or IP address. Please wait a while and try again later. 我干了啥？我啥也没干啊！望大神们解释下这是啥原因啊？ ...
使用阿里巴巴矢量图标库下载所需的小图标
倾世~茹薇
04-02 3565
阿里巴巴矢量图标库官网：点击打开链接在官网注册一个账号登录进去，或者直接用github账号，qq账号等；在这里搜索你需要的图标：   将搜索到的图标加入购物车，点击购物车 点击“添加至项目”，然后点击确定在项目图标页中，选择Font class，点击更新代码点击更新代码之后会生成新的icon图标的css地址，复制这个地址在浏览器中打开，然后全部复制css代码替换掉原来的icon.css中的代码。这...
阿里矢量库（各种图标搜索功能）
weixin_30342209的博客
06-29 537
今天发现一个比较好的图标集合地址：http://www.iconfont.cn/ 顿时心情澎湃，做前端的小伙伴 不要错过哟 转载于:https://www.cnblogs.com/lihfeiblogs/p/5627276.html
解决iconfont 图标不显示问题
热门推荐
ppx_mqj的博客
09-05 4万+
刚开始用icon font图标库不是很熟悉，踩了一些坑，希望分享出来能给新手们带来一些帮助 从官网上下载图标至本地后，放到项目里面要注意一下两点： 1、路径问题 找到iconfont.css这个文件并打开它，你会看到它里面的路径是这样的 报错了，原因是我在项目里面存放路径是这样的 所以这个时候你只需要将路径改成你项目结构中的路径即可，修改后： 2、路径配置好后怎样把你下载的图标引入到代码中 ...
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值