Web端如何引用iconfont,iconfont所有的引用方式。
一、如何下载iconfont图标。
在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。
鼠标悬浮上后会出现三种选择:
1.添加入库:功能和淘宝中的购物车一样,可以添加多个图标进行操作。.
2.收藏: 同样可以选择多个自己喜爱的图标放在”我的收藏”中,避免以后找不到。
3.下载图标:选择单个图标进行下载,可下载为SVG格式、PNG格式和AI格式。
下载的基本上都是压缩包的形式。解压后即可引入。下面我们了解一下如何引入inconfont图标。
二、如何引入iconfont图标
引入iconfont可以在线上引入和本地引入。
主要的引入方式有:icon单个引入(本地引入)、unicode引入、font-class引入、symbol引入。
1.icon单个使用。
用户直接下载SVG、AI、PNG格式的图标。然后在源码中直接引用。如<img src=””>
SVG格式则是:下载之后,推荐使用谷歌浏览器打开,右击,选择查看网页源代码。
选择<svg …>…</svg>的所有内容,进行复制。将代码粘贴到要显示的前端页面中,利用css可进行高宽的修饰等。
此种方式适合用在图标引用特别少,以后也不需要特别维护的场景。
- 比如设计师用来做demo原型。
- 前端临时做个活动页。
- 当然如果你只是为了下载图标做PPT,也是极好的。
不过如果是成体系的应用使用,建议用户把icon加入项目,然后使用下面三种推荐的方式。
2.unicode引用(线上)
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
第一步:拷贝项目下面生成的font-face
点击添加至项目后自行创建一个项目,如demo。
复制代码粘贴至前端页面的<style></style>中。 //前一定要加上 http:
第二步:定义使用iconfont的样式
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont"></i>
示例代码如下:
<style>@font-face {font-family: 'iconfont'; /* project id 617401 */src: url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot');src: url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot?#iefix') format('embedded-opentype'),url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.woff') format('woff'),url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.ttf') format('truetype'),url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.svg#iconfont') format('svg');}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style>
</head>
<body><i class="iconfont"></i>
</body>
3.font-class引入
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
第一步:引入iconfont.css文件:
引入css文件可以用线上也可以用本地的,本地的需要下载文件,线上引入可直接在项目中复制地址。
1.引入本地的iconfont.css文件
下载压缩包文件,解压,找到文件夹中的iconfont.css件
复制粘贴到本地项目的文件夹css中
然后在源代码的<style></style>上面,写link标签,引入外联样式表iconfont.css
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
2.引入线上iconfont.css
找到自己创建的项目,找到font-class,复制代码到源代码中,引入外联样式表iconfont.css
第二步:挑选相应图标并获取类名,应用于页面
打开下载的压缩包文件夹,找到demo_fontclass.html,使用浏览器打开,复制所用图标的类名。粘贴至所用的页面代码中。
<i class="iconfont icon-kefu"></i>
或者在项目中直接复制图标的类名:
示例代码如下:
<head><!--引入线上css文件--><link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.css"><!--引入本地css文件--><link rel="stylesheet" type="text/css" href="css/iconfont.css"><style></style>
</head>
<body><i class="iconfont icon-kefu"></i>
</body>
</html>
4.symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
- 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
Symbol引用也可以在本地或线上引用,参照font-class的引用方式即可。
第一步:引入iconfont.js文件:
引入本地iconfont.js文件
<script src="js/iconfont.js"></script>
引入线上iconfont.js文件
第二步:加入通用css代码(引入一次就行):
<style type="text/css">.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
使用浏览器打开文件,找到图标的类名,并按下例格式引用到页面代码中:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-kefu"></use>
</svg>
同font-class一样,也可以直接复制项目中的类名
示例代码如下:
<head><style type="text/css">.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
</head>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kefu"></use></svg><!--本地引用js文件--><script src="js/iconfont.js"></script><!--线上引用js文件--><script src="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.js"></script>
</body>
使用以上方法,iconfont就可以显示在页面上啦!没显示?那就在看一遍。这可能是最全的引入iconfont的方法了!!
引用时出现显示的是方框,或者没有显示。原因是iconfont更新了新的图标,此时需要同时更新iconfont的链接。如果没有更新链接,那么就会造成引用不到的原因,然后就变成小方框了。
Web端如何引用iconfont,iconfont所有的引用方式。相关推荐
- WEB端使用阿里图标
阿里图标官网 web端需要插入小图标可以有三种实现方式(除了插入image图片). 首先进入阿里图标官网注册账号,在资源管理里选择我的项目,找到+号选择新建项目,比如first-icon. 到图标库选 ...
- H265格式兼容各个浏览器web端播放方案
可能有很多朋友会遇到H265格式的视频流无法播放,毕竟现在很多相机都支持h265了,确实有很多优点,但是它最大的问题就是很多浏览器无法播放,也有部分浏览器能够兼容h265,但是总不能让用户指定浏览器使 ...
- vue-cli通过symbol引用阿里iconfont图标
官方文档中已经说明symbol引用方式有以下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式 兼容性较差,支持 ie9+,及现代浏览 ...
- 小程序引用阿里iconfont
1.获取iconfont 这里就跳过了.获取后直接是下面这个文件夹 2.将整个文件夹放到小程序中,页面目录是 lib/icontfont,并且将iconfont文件中的iconfont.css改成i ...
- [yishen] 小慕读书web端学习笔记
课程常用链接 [前奏-课程]快速入门Web阅读器开发 [小慕读书web端]Vue 实战商业级读书Web APP 全面提升技能 [epub图书免费下载站点 · 中文书]http://www.ziliao ...
- iconfont使用的三种方式(阿里巴巴矢量图标库代码使用)
###### 使用的相关链接教程 图标下载步骤 使用的三种方式 图标下载方式 首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入"暂存架" 选择完所有要 ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
- php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
- flutter和webapp_Flutter全平台!迁移现有Flutter项目到WEB端
写在前面 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS .Android.web和桌面 ...
最新文章
- 关于.NET玩爬虫这些事 【初码干货】
- ios 关于block传值报错
- 程序设计类课程教学中创造技法的探索
- java 使用Spring的JdbcTemplate以及DriverManagerDataSource实现JDBC操作
- php7抓取网页数据,php7-远程获取api接口或网页内容
- 按之字形顺序打印二叉树
- jq localStorage
- 【SQL】字符型函数
- LayaAir 事件 laya.events.Event
- nero burning rom 2021绿色版安装及使用教程
- Adobe Flash CS 6新功能详解二——安装Toolkit-for-CreatJS插件
- python实现指纹识别毕业论文_指纹识别算法实现-毕业论文
- 陈强教授《机器学习及R应用》课程 第十三章作业
- matlab特定颜色提取
- 全球及中国智能家居市场十四五竞争形势及营销模式咨询报告2021-2027年
- 了解公司企业:Primetics
- 1307:【例1.3】高精度乘法
- ZipEntry实现文件解压缩与目录解压缩
- IT历史:计算机业简史
- QQ+微信+支付宝收款一码付这么神奇,如何自己制作收款二维码
热门文章
- FPGA并行计算可编程芯片
- MySQL 统计上一个自然周 周一到周日的数据 为空则补0实现
- 搜索引擎的小技巧【可以组合起来使用】:
- 各大电商API详细数据获取
- 使用final来修饰方法
- 零基础入门 自学 JAVA SE 基础篇(九)instanceof final 开闭原则 多态 抽象(abstract)方法与抽象类 接口(interface)
- 广东省污水处理厂数字孪生平台建模_三维可视化平台_吉优赛维数字孪生_三维激光扫描_BIM建模
- CentOS服务器的安装
- Python实现一个全国各高校查询系统
- wsl2+ubuntu20安装ros2遇到update问题