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

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

admin2年前 (2021-07-22)其他592

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

相关文章

CloudFlare免费CDN加速自定义节点-CloudFlare自选IP加快CDN速度

CloudFlare免费CDN加速自定义节点-CloudFlare自选IP加快CDN速度

我在CloudFlare Partner的文章里已经提到过自定义加速节点IP的方法。CloudFlare官方网站不提供CNAME访问CDN和a记录,但Cloud...

PHP判断用户使用QQ或微信访问则提示用浏览器打开

PHP判断用户使用QQ或微信访问则提示用浏览器打开

QQ和微信里打开网站的时候,不会直接显示网站内容,而是提示使用浏览器打开,这能有效防止域名被QQ报毒!直接把以下代码加上/index.php的最顶部即可,只要你...

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

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

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

一键将 DEDECMS 迁移到 WordPress

一键将 DEDECMS 迁移到 WordPress

首先说明一下,我们制作的导入脚本是 PHP 命令行脚本,意思是你要有服务器的 SSH 权限。为什么这么做呢,一般来说使用后台导入会比较久,而使用命令行则飞快,当...

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

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

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

具有多用户登录和注册系统的购物车源码 HTML - CSS - PHP - MySQL

具有多用户登录和注册系统的购物车源码 HTML - CSS - PHP - MySQL

主要特点✅ 响应式关于页面✅ 响应式评论滑块✅ 响应式联系页面✅ 响应式订单页面✅ 响应式商店页面✅ 响应式用户注册页面✅ 响应式用户登录页面✅ 响应式用户配置...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌