html使用iconfont-阿里巴巴矢量图标库及登录界面的源码

最新推荐文章于 2022-09-22 15:22:48 发布
VIP文章 最新推荐文章于 2022-09-22 15:22:48 发布
阅读量939 收藏 1
点赞数 1
文章标签： html 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NIDENUWANG/article/details/121498621
版权

网址

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

1、登录

2、在页面中选择需要的图标

在这里插入图片描述### 3、选择“添加入库”

4、点击“添加至项目”（如果没有就创建一个项目）

在这里插入图片描述#### 5、在font class红的情况下，点击“下载至本地”
在这里插入图片描述

6、下载后解压打开

在这里插入图片描述

7、选择把文件复制到你放的地方，比如

在这里插入图片描述

8、在index.html的head里面添加下面一句话

在这里插入图片描述
注意：font是我个人文件名，你需要填写自己的文件名

9、在body中填写，注意不能缺少iconfont

最低0.47元/天 解锁文章
前端-NUWANG
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML阿里巴巴注册页面源代码
11-16
HTML阿里巴巴注册页面源代码
HTML中引用icon图标
热门推荐
qq_43804601的博客
05-03 1万+
简单介绍在HTML如何中引用icon图标 1.登录iconfont官网 生成连接 ① 搜索想引用的图标，找到后加入购物车 ② 在购物车中将icon图标添加至项目 ③ 点击生成新代码 生成代码（示例）： //引入iconfont的声明 @font-face { font-family: 'iconfont'; /* Project id 3373080 */ src: url('//at.alicdn.com/t/font_3373080_hrq4d4vg3gp.woff2?t=1651
HTML+CSS实现简单的登录页面
沐小侠
09-22 1307
使用HTML+CSS实现简单的登录页面效果
阿里矢量图标iconfont在微信小程序的使用
weixin_46972614的博客
08-13 1054
阿里矢量图标iconfont在微信小程序的使用 第一步：进入官网： https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 第二步找到自己需要的图标，添加至购物车，如下图 第三步.进入购物车中查看 这是已添加成功的： 点击确定进入到该项目中 第四步：下载至本地 第五步：解压 会得到类似于该文件名的文件夹 font_2003460_ffwtix36mni 点进去的目录结构： 第六步：我们一共需要五个物件，就...
HTML中的登录页面 登录页面带头像标志的方法
weixin_72303943的博客
06-24 1651
登录页面带头像标志的方法
基于微信小程序实现漂流瓶小程序源码分享
06-13
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现类似滴滴拼车小程序源码分享
06-15
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现爱卡汽车小程序源码分享
06-13
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现个人音乐台程序设计源码
03-20
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现类似京东首页demo源码分享
06-12
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
大型行业商务系统网站源码（仿阿里巴巴）最新免费版
03-09
强大商铺功能。 每个商家都可以创建一个属于自己的商铺，任何一个商家都可以创建自己的图库，图库栏目可以创建多个栏目。 商家的资质证明材料、产品图片、企业新闻图片都可以快捷传送到图库, 用户在任何地点发新闻、企业介绍、产品等，可以任意和快捷调用图库图片, 商家中心图库具有批量上传功能，在内容上、布局等方便了商家的实际操作. 商务系统在现有的主流电子商务网站上进行优化，基本架构成熟。有完善的独立商家平台， 能管理企业产品及一切相关行为，同时商家与站长有良好关联体系。 设有批量询价、产品推荐、批量报价、个性化认证体系、资讯体系等特色功能。 强大的行业展会功能 对展会提供按时间月份查询、按区域查询、按搜索导航查询等，完整解决普通用户找展会、商家发布展会的问题。 实用的人才模块功能 主营为用户提供行业人才解决方案，即：只要从事这个领域的人员都可以在这个上面投放简历，同时从事这个行业的企业也可免费找到人才。人才模块的各元素非常实用完善。 资讯中心 商务系统应用对象主要面向企业与互联网创业团队，它提供了完善的电子商务平台功能,后续在不断增强升级： 资讯中心设计为为某行业提供完整的主要原材料市场价格、行业报告、市场变化、技术手册等多种实用信息。利用V6的新闻模型可灵活搭建强大行业资讯平台。 详细功能说明 1、支持易宝支付、支付宝、财付通、快钱在线支付。 2、支持普通会员、VIP、代理三种会员体系，认证体系分金、银、普通三类。 3、PHP168首创的标签技术应用，支持强大而易用的所见所得的标签操作功能。 4、商家会员管理中心，一站式会员操作管理，包括充值、发布产品、信息推广等20余个操作模块。 5、支持销售批量报价。 6、支持采购批量对比商家。 7、实用的在线交流体系，支持站内短信、留言本、即时通讯。 8、支持整站内手机体系应用。 9、优秀的个性化搜索体验，方便用户查找产品、商家、人才、展会等资源。 10、具有优秀的企业图库功能，支持图片栏目分类、证书资质管理、产品图片快捷插入等。 11、支持企业图片批量上传。 12、提供12套企业模板，可自由更改banner。 13、商家店铺可自由组装，分产品、求购、人才、新闻、资质、展会等。 14、支持企业注册是否需要审核。 15、系统支持首页、列表页、内容页缓存，后续可实现静态化。 16、系统性的实现了完整行业电子商务概念与应用模型。 17、有强大的行业展会模块，包含展会发布、展会管理、展会详细列表。 18、支持展馆管理，支持展馆发布、编辑，个性化搜索。 19、支持按地点、按月份、按类别搜索与发布各类展会。 20、支持列表产品与产品搜索按时间、按价格、按点击率、按认证等排序。 21、完善的招聘模块，包含企业招聘、个人求职、按地区职位分类。 22、支持求职者发布、管理自身简历，同时按类别搜索职位。 23、支持企业接收、管理求职信息，管理和发布企业招聘。 24、与实际供应链体系紧密相连，供应链专家参与开发，并持续优化。 25、可建立实体供应商圈。 26、支持销售向企业申请合格供应商请求。 27、支持采购主动邀请销售企业参与供应商评估。 28、支持首页推荐企业招聘供应商公告。 29、设有行业报价模块，支持按日、按列表布局，并设有合理广告位。 30、设有技术手册模块，支持技术文档与手册发布，并支持类别搜索。 31、系统提供多个自定义页面。 32、完善的产品发布系统与模块。 33、支持MSN/QQ/阿里旺旺等聊天工具。 34、强大的商家管理模块，支持商家查询、供应商与代理商查询建立、优秀商家推荐。 35、提供完善的广告模块，整个体系内设计时候预留了广告位置。 36、强大的盈利模型，VIP盈利、代理盈利、列表推广、首页推广、竞价排名等。 37、完善的求购模块，支持采购求购信息发布、热点推荐、求购导航等。 38、支持人民币转化金币、金币与积分互换。 39、支持整个体系消耗金币与积分，可有站长自由控制，并设定兑换关系。 40、个性化友情链接设置，分图片Logo、合作伙伴、友情链接。 41、支持海量文章系统发布，多权限管理。 42、支持文章、技术手册静态。 43、强大的专题功能，可匹配视频、产品、论坛、技术手册等。 44、系统将不断快速升级，不断增强应用模型。 45、商务系统将能协同实用PHP168其他相关系统模块，极大增强项目的技术拓展性。 46、可配套使用PHP168知道系统、圈子系统、视频系统、商城系统、分类信息系统等。 47、高深度整合PHPwind社区系统，可随时匹配安装。
基于微信小程序实现企业OA系统小程序小程序源码分享
06-15
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现汽车测评小程序小程序源码分享
06-13
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现二维码生成器工具小程序源码分享
06-13
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现事项助手工具小程序源码分享
06-13
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
HTML+CSS——网页设计项目完整版本（阿里矢量图标库）分享
Bonsoir777的博客
08-11 1292
本文主要介绍阿里矢量图标库首页的实现过程
通过Iconfont在线调用项目图标
AME1314的博客
07-24 2268
首先我们登陆https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a，登陆自己的账号。 在帮助文档中的代码应用有四种方式进行引用，友情链接：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=code 在这...
在小程序中使用阿里巴巴矢量图标库-代码版
m0_61204947的博客
05-18 716
阿里巴巴-iconfont 首先请自行注册-这个是必须要的 1.找到自己想要的图标,鼠标移动到图标上,点击添加到库 2.选择完之后,点击右上角的购物车图标 3然后在右侧点击添加至项目 4.在 资源管理-我的项目 中可以找到个人主页的项目 这里主要说下Unicode的转换 开始进入时,会自动生成代码,如果没有,则点击红色字体,暂无代码点击生成 在自己的项目中新建文件夹styles下文件iconfont.css 把代码复制进来 修改代码 src: url(''); src: url('..
阿里云矢量图标使用方法
weixin_44195615的博客
11-13 1524
1、打开官网：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2、注册账号并登陆（已有账号直接登录） 3、点击网页中间的搜索框，搜索你需要的矢量图标的名称。这里我需要的是首页图标，所以搜索“首页”。选取某一个或多个点击你需要的图标 -> 添加入库。添加入库后点击购物车，添加至项目即可，名称自定。 4、点击生成代码，复制代码。在html文档（如标签中，和引用外部CSS文件一致）添加以下代码 <link rel=
使用 阿里巴巴矢量图标库
最新发布
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类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值