iconfont使用方法

最新推荐文章于 2024-08-21 15:16:29 发布
最新推荐文章于 2024-08-21 15:16:29 发布
阅读量568 收藏
点赞数
分类专栏： 前端工具 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42635539/article/details/108887057
版权
本文介绍了阿里妈妈Iconfont的使用方法，包括登录账号、新建项目文件夹、搜索图标、添加到项目、选择fontclass并下载，最后将文件添加到项目中进行使用。
摘要由CSDN通过智能技术生成

一、iconfont

他来了，他来了，他带着阿里妈妈iconfont字体图标库的使用方法向我们走来了！
首先看一下什么是iconfont：
Iconfont：阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
敲黑板！敲黑板！敲黑板！
童鞋们手里的iphone都放一放，认真听课了，重点来了。

1.1、使用方法

第一步：登录

还是熟悉的套路，又是熟悉的场景，登录账号！
iconfont登录页面
细心的小伙伴可能会发现，自己貌似只有微博和git账号，然后又忘了自己的git密码，于是果断掏出iphone打开微博一顿狂扫，终于登录成功了！

第二步：新建项目文件夹（存放iconfont）

登录成功后点击 (资源管理)—>(我的项目)
新建项目
根据以上步骤创建好你要接收iconfont的项目文件夹，然后你就会发现你的项目库中出现了你刚才创建的图标项目文件夹。

第三步：开启紧张刺激的找图标环节

然后再搜索框中搜索你想要使用的图标，添加到购物车中去
加入购物车
然后将购物车里自己选择的图标添

最低0.47元/天 解锁文章
不会唱杰伦
关注
专栏目录
阿里iconfont使用方法
QW's Blog
02-14 7043
阿里巴巴iconfont的使用方式分为两种： 本地使用 线上引用 iconfont-阿里巴巴矢量图标库 0.前期准备 使用时先到网站上选中需要使用的图标添加至项目 1.本地使用 1.下载项目至本地 2.解压到项目中 3.在页面中引入样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 8431
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
使用Iconfont矢量图标库的详解
最新发布
baidu_28705493的博客
08-21 1030
访问Iconfont官网：首先，打开Iconfont官网，在首页的搜索框中输入需要使用的图标名称。添加图标到项目：搜索结果出来后，可以选择将图标添加入库，也可以收藏或下载。点击右上角的购物车图标，会显示已添加入库的图标。将想要使用的图标添加至项目。若还未创建项目，则需要新建一个项目并将图标添加至该项目中。进入项目管理：图标添加至项目后，会自动跳转至该项目页面，也可以通过导航栏中的资源管理进入“我的项目”页面管理已添加的图标。修改图标名称：点击编辑按钮, 可以修改图标代码, 名称和Class名称Iconfon
iconfont的N种使用方法
weixin_44042442的博客
12-02 1万+
icon-font的使用方法 为什么icon font是一个方形的框 图标不显示
IconFont的使用方法
weixin_34293911的博客
10-02 144
IconFont的作用就是用字体格式来取代图片、特殊字体的展示，用的比较多的就是一些纯色的图片，具体主要有当前CSS3属性里的自定义字体（@font-face）来实现。1、先来说说它的优缺点：优点：体积比图片小，可以变化大小和颜色，而图片则是不可以的。缺点：由于是字体模式，所以只支持纯色，多颜色则是不支持、2、如何使用： 2.1、字体的格式，不同的浏览器支持的字体格式是...
iconfont的使用（最详解）
富朝阳的博客
02-20 6415
Iconfont 是阿里巴巴矢量图标库平台（http://iconfont.cn），它允许用户访问大量图标并将它们用作网页、移动应用或其他数字界面的一部分。以下是关于 Iconfont 的介绍和使用
iconfont的使用（超详细步骤）
qq_45549336的博客
08-04 1万+
目录方法一方法二 方法一  注册iconfont账号  在图标库里面选自己喜欢的，加入购物车之后，添加到项目  下载到本地，并解压  这里我们只需要下面勾选的文件，其他都没用  下面是使用方法，我是用一个test文件夹来演示，大家可以一模一样改成vue中使用。  在test文件夹中，是这样的结构。注意，字体文件必须放在iconfont文件夹里面，iconfont这个文件夹不要改其他名字  在html中引入iconfont.css文件 <!DOCTYPE html> <head&
阿里iconfont使用方法与案例
qq_45409543的博客
09-17 367
静态页面练习，结尾有成果展示 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线</title> <link rel="styl
《前端》阿里字体库iconfont使用方法
BelleDiao的博客
01-31 1705
1、到阿里字体库网站中，登录账号。http://www.iconfont.cn/ 我的账号是我的126邮箱。 2、在图标库中查找自己需要的图标，并加入购物车，添加至项目中。最后下载到本地。 3、如何将想用的图标应用在html网页中？ 下图为下载的阿里图标。 首先将iconfont.css文件引入到html中（注意路径）： <link re...
react项目如何使用iconfont的方法步骤
12-08
总结来说，React项目中使用Iconfont的主要步骤包括：配置Iconfont项目并获取CSS，创建`Icon.js`组件，可能需要创建`iconfont.less`文件以自定义样式，最后在项目中引入并使用`Icons`组件。这种方式使得图标管理和...
iconfont的使用
VVVZCS的博客
09-07 503
1，首先创建个项目 2，去iconfont官网找对应的图标 3，添加至项目 4，下载到本地 5，解压 6，选择文件并导入 在项目代码中的asset文件夹放置： 放置模板： 7，在main.js中导入 8，使用方法： class中有iconfont，图标代码在iconfont里的项目中： ...
Iconfont图标的使用方法
最好的一天
12-03 6424
目前阿里巴巴图标库的图标已经非常多了，可以满足我们日常的开发需求，一种图标有多个不同的样式可以随意选择，使用起来也特别方便。下面说一下使用方法： 1.打开阿里巴巴图标库官网网站（直接点击链接即可） 2.点击图标库，进入到图标库界面，可以看到很多种的图标，可以直接选择所需图标，也可以在搜索框搜索，如下图所示   3.例如我搜索“放大镜”图标，选择一个，加入购入车（就像淘宝购物一样操作及其...
Icon Font浅谈
weixin_34331102的博客
11-22 100
这周继续在弄hybird app 的 UI框架的重构，进行到了编写换肤功能的阶段，而在做换肤之前，我想应该先弄一套框架内置的图标。 而图标无非就是两种做法： 1.图片 使用图片很正常，但是有缺陷的。 1.众多的图标导致了增加了许多HTTP请求   PS:有人会说我把它们弄成一张大图不久行了，可是这样弄了之后，你连大小都无法改变。所以肯定还是一批小图片。 2.放大缩小失真 3.同张图片...
IconFont使用方式简介
热门推荐
qq_45327886的博客
03-02 2万+
Iconfont在线和本地引入方式简介
iconfont使用
冷风中的夜晚
06-04 1656
1、网址 http://www.iconfont.cn/2、登录网址搜索自己要使用的图标3、选中需要的点击购物车图标4、点击右上角购物车图标5、根据测边框选择下载代码6、解压缩将iconfont.css内容复制到你的css样式表里面@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1528081992040'); /...
iconfont如何使用
2302_76198190的博客
06-15 770
iconfont如何使用
iconfont ios使用
05-23
在iOS应用中使用iconfont需要先下载iconfont的字体文件，然后在Xcode中将字体文件添加到项目中，并在代码中引用该字体文件。 以下是具体步骤： 1. 下载iconfont字体文件 在iconfont网站上下载需要使用的字体文件，下载后解压缩得到.ttf或.otf格式的字体文件。 2. 将字体文件添加到Xcode项目中 将字体文件拖拽到Xcode项目中，选择“Copy items if needed”选项，并勾选“Add to targets”选项。 3. 在Info.plist文件中添加字体文件名称 在Info.plist文件中添加UIAppFonts键，并将字体文件名称添加到数组中。 4. 在代码中使用iconfont 使用UIFont的类方法fontWithName:size:获取iconfont对应的UIFont对象，然后设置UILabel、UIButton等控件的font属性即可。 例如： ``` // 获取iconfont对应的UIFont对象 UIFont *iconFont = [UIFont fontWithName:@"iconfont" size:20]; // 设置UILabel的font属性 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; label.font = iconFont; label.text = @"\U0000e605"; // 设置UILabel的文本为iconfont对应的unicode码 ``` 以上就是在iOS应用中使用iconfont的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值