iconfont怎么引入

我来回答
共3个回答
孙暄玲
回答
step 1:找到阿里巴巴矢量图标库官网https://www.iconfont.cn,然后注册登录,或者用github登录也行,此步骤跳过;step 2:找到图标管理->我的项目->然后新建项目:step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;强调一次,把上面这些文件都放在一个文件夹内,然后放在你的项目目录中,再在你的项目中引入iconfont.css文件step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名。 收起
2022-01-06
利茂绿
回答
首先在iconfont图标库中找到需要的图标,点击购物车图标“添加入库”。打开购物车,点击下方“添加至项目”按钮,如果没有项目,就新建一个。在我的项目页,可以看到3种引入方式,以及图标的名称。切换到Font class方式,点击“查看在线链接”,生成以下代码并复制:打开你的网页代码,添加link标签,将上面的代码粘贴到href属性下。注意需为路径添加“http:”字样。然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取想要修改图标样式,可以通过font-size,color来调整:想要增加或更换新的图标,只需重复1、2、3步骤,并在第4、5步更新一下代码,最后在第6步增加新图标的i标签即可。 收起
2022-01-04
单月莎
回答
1.登录iconFont官网。2.选中需要的icon,添加入库。3.添加至项目。4.添加到自己的项目中,点击更新代码,并复制此代码,并单击下载至本地。5.解压后只复制iconfont.css,放入自己的项目中并正确引。6.我放到styles文件夹中了。7.在index.scss中引入了。8.打开 iconfont.css,把下面的复制的代码替换 iconfont.css中的 @font-face,就可以在项目中引用图标字体了。9.如果想添加新的图标,只需更新 @font-face代码,替换 iconfont.css中的@font-face。再把字体文件名帖进去就行。 收起
2022-01-04
其它产品问答
iconfont没有版权。iconfont平台的Logo、“iconfont.cn”等文字、图形及其组合,以及iconfont平台的其他标识、徵记、产品和服务名称均为iconfont及其关联公司在中国和其它国家的商标,未经iconfont书面授权,任何人不得以任何方式展示、使用或作其他处理,也不得向他人表明您有权展示、使用或作其他处理。用户承诺不得以任何方式利用iconfont平台直接或间接从事违反中国法律以及社会公德的行为,iconfont有权对违反上述承诺的行为采取措施(包括但不限于删除违反承诺的内容、暂停或停止为用户提供服务等)并在iconfont平台予以通知公告。
2022-01-04
3 个回答
首先登陆iconfont官网,然后点击由上角的登录按钮进行登录,还没有账号的小伙伴需要先注册哦!在弹出的对话框中选择你的登录方式,登录成功后右上角便会显示你的账号信息哦!准备工作做好后,在搜索框中输入你需要的图标如“首页”,然后敲回车,就会出现很多关于“首页”的图标。将鼠标移至你需要下载的图标上,从上到下依次有三个选项,分别是“添加入库”、“收藏”、“下载图标”,然后点击“下载图标”。在弹出的对话框中你可以选择改变图标的颜色。调好颜色后选择底部提供的样式进行下载即可。
2022-01-04
3 个回答
打开百度首页,搜索【iconfont】,在搜索列表中打开第一个官网。进入官网后可以看到网站里有很多成套的图标,我们点击右上角的【登录】按钮,可以选择用微博快捷登录哦。登录后在顶部导航中一次点击【图标库】-【官方图标库】,也可以选择其他的图标库哦。找到自己想要下载的图标库,点击进入。找到自己想下载的图标,鼠标放在图标上,点击【下载】按钮。(也可以加入购物车批量一起下载哦)。在弹窗中可以修改图标的颜色、大小,修改完成后点击【AI下载】或【PNG下载】。我们可以把两个都下载一下看下,png是可以直接使用的哦,AI下载下来的是矢量图,可以用AI打开进行矢量图的编辑哦。
2022-01-04
3 个回答
1、登录阿里巴巴矢量图标库,网址:https://www.iconfont.cn/。2、登录账户(可以用微博、GitHub账号直接登录)。3、搜索自己需要的图标,例如:手机,不得不说,图标非常之多!(下面显示的只是部分内容)。4、选取自己需要的图标,添加入库。5、搜索并添加自己需要的其他图标入库,例如我添加了着一些。6、引用阿里图标库的方法有三种,分别是:调用阿里cdn远程引入,下载图标引入图标文件(支持PNG和SVG和AI格式图片下载),下载图片字体文件自行引入(下载下来的压缩包中有演示文档及使用说明)。7、对于阿里图标库中不存在的图标或者说,你没有搜到这款图标,但是你在别的图标库中下载到了这款图标的话,你还可以将该图标上传到你的项目里面去,这样,你就可以通过阿里图标库来调用这款图标了。
2022-01-04
3 个回答
官网搜索iconfont下载即可。iconfont一个阿里爸爸做的开源图库,人家还有专门的 github issue,但人家的图标数量还是很惊人的,不仅有几百个公司的开源图标库,还有各式各样的小图标,还支持自定义创建图标库,所以不管你是一家创业公司还是对设计很有要求的公司,它都能很好的帮助你解决管理图标的痛点。阿里巴巴iconfont+ 也是图标字体开发时生成字体文件及demo的网站;阿里巴巴iconfont+ 生成的demo可以解决图标单色调问题,其原理是 生成svg合集, 然后使用svg呈现图标。但该方式兼容性较差(SVG兼容小结), 如是移动端开发不考虑低版本浏览器兼容问题可以尝试该方式。
2022-01-04
3 个回答
查看更多
消息通知
咨询入驻
商务合作