当前位置:首页 > 技术博客 > 其他 > 阿里巴巴矢量图标WEB应用之保姆级教程

阿里巴巴矢量图标WEB应用之保姆级教程

4年前 (2021-07-22)其他800

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。


官网:https://www.iconfont.cn


Iconfont的用法多种多样,同样是web使用也有3种不同的方式,我就说那个最简单方便的教程吧


1、使用Iconfont图标之前需要登录一下



2、登陆之后在搜索框搜索你想用的Iconfont图标,比如说现在想用一个做主页的图标,你就可以搜:主页、首页、home、家、shouye、zhuye等等等。。。支持多种模糊搜索无缝互译简直不要太简单!



3、找到你喜欢的Iconfont图标之后,点击购物车的图标添加入口,再然后右上角的购物车里面就有了



4、创建一个小项目,名字随意(这一步就相当于创建了一个文件夹),很简单填好名字点击确认



5、确认好项目名字后会将刚才购物车里的图标自动添加到这个项目里并自动跳转到项目管理页面,这事你要做的是:选中 Font class 然后点击生成代码


6、生成之后就会得到一个css资源的线上链接,然后将这个链接引用到你的网站里,css怎么引入不用我教你吧


防止有人真的不会,我写一下导入css的代码(每个项目生成的链接都不一样,要灵活运用):

<link href="//at.alicdn.com/t/font_2693678_xj0hrla4dom.css"rel="stylesheet">


7、引入css文件之后离成功还剩最后一步了,给dom元素加入对应的class,你可以用span、i、b、等标签来定义,我推荐用 i 标签

<i class="iconfont icon-shouye_huaban1"></i>

注意 不要只添加 图标的class ,还要给一个初始的 iconfont 的class,很多人不知道这一步所以就不会生效,所以一个 i 标签至少有两个class!其中一个是不变的:iconfont


如果你现在用的是电脑,点击下面的【运行代码】来看看效果吧!

<link href="//at.alicdn.com/t/font_2693678_xj0hrla4dom.css"rel="stylesheet">

<style>
.iconfont{
    color:red;  /*图标颜色*/
    font-size:200px; /*图标大小*/
}
</style>

<i class="iconfont icon-shouye_huaban1"></i>


写在最后:

zblog的导航图标怎么添加?

1、获取iconfont的css在线资源并引用

2、在后台模块管理找到导航栏给对应的栏目设置好class就ok了



总结:找到自己心仪的对象并添加入库----生成 Font class 类型的 css 资源链接 ----- 在网页中引用 css 链接 ------ 给对应的标签添加两个 class (其中一个名字是万年不变的)

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/135.html

标签: 字体iconfont

相关文章

中国汉字有多少?有人说是8万多,有人说有9万多,但常用的字只有3000左右。这里是使用频度最高的3000个常用汉字

中国汉字有多少?有人说是8万多,有人说有9万多,但常用的字只有3000左右。这里是使用频度最高的3000个常用汉字

中国汉字有多少?有人说是8万多,有人说有9万多,但常用的字只有3000左右。这里是使用频度最高的3000个常用汉字的一是了不在有人上这大我国来们和个他中说到地为...

随机背景图片php源码

随机背景图片php源码

不知道写点啥了,所以。。。,懂得都懂说明一下:虽然有水的成分但是保证99%内容为原创,都是php常用方法,和别人的有些类似很正常,声明一下不是网上抄袭的!淦新建...

必应Bing每日一图,API代码

必应Bing每日一图,API代码

在网站根目录新建一个php文件,例如:bing.php,然后复制下面的代码。Api源码:<?php //判断是否随机调用 if ($_GET...

禁止浏览器直接访问程序模板文件代码

禁止浏览器直接访问程序模板文件代码

很多cms的程序主题模板文件默认情况下在浏览器中输入模板文件的路径可以直接访问,并会显示模板的源代码,因此很容易被一些不良主题模板开发者窃取劳动成果,所以在制作...

Z-Blog纯净主题列表页二次开发

Z-Blog纯净主题列表页二次开发

闲着没事干,把Z-Blog纯净主题的列表页魔改了一下,不喜勿喷!源码附在下面了修改:post-multi.php (全部覆盖,记得备份源文件哦){* ...

强力推荐的idea插件,开发效率有质的提升

强力推荐的idea插件,开发效率有质的提升

idea插件安装 1、Alibaba Java Coding Guidelines(代码检测)第一个是和阿里开发手册配套的代码检测工具,能大大提升大家的代码习惯...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。