阿里矢量图三种在线引用方法

最新推荐文章于 2022-09-05 22:12:46 发布

gentlebreeze_zs

最新推荐文章于 2022-09-05 22:12:46 发布

阅读量1.7k

点赞数 1

分类专栏：网页基础

本文链接：https://blog.csdn.net/qq_41844076/article/details/117079801

版权

网页基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

unicode 引用只支持黑白图标

<!DOCTYPE html>
<html>
<head>
	<title>unicode 引用</title>
	<meta charset="utf-8">
	
	<!-- 该方法为阿里矢量图的unicode的方法 只支持黑白图标 -->
	<!-- 注意 font-face中 url要加 https: 否则图标无法显示-->
	<style type="text/css">

	@font-face {
	  font-family: 'iconfont';  /* Project id 2556875 */
	  src: url('https://at.alicdn.com/t/font_2556875_0myqblm2y33l.woff2?t=1621391226895') format('woff2'),
	       url('https://at.alicdn.com/t/font_2556875_0myqblm2y33l.woff?t=1621391226895') format('woff'),
	       url('https://at.alicdn.com/t/font_2556875_0myqblm2y33l.ttf?t=1621391226895') format('truetype');
	}
	.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;}
	</style>
</head>
<body>
	<i class="iconfont">&#xe65e;</i>
</body>
</html>

font-class 引用只支持黑白图标

<!DOCTYPE html>
<html>
<head>
	<title>font-class 引用</title>
	<meta charset="utf-8">
	<!-- 该方法为阿里矢量图的font-class 引用方法 仍然不支持多色 -->
	<!-- href 的头部也需要加上https: 否则不显示 -->
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2556875_0myqblm2y33l.css">
	
	<style type="text/css">
	</style>
</head>
<body>
	<i class="iconfont icon-QQ"></i>
</body>
</html>

symbol 引用支持彩色图标

<!DOCTYPE html>
<html>
<head>
	<title>京东登录</title>
	<meta charset="utf-8">
	<!-- 该方法为阿里矢量图提供的symbol引用方法 支持多色图标 -->
	<script type="text/javascript" src="https://at.alicdn.com/t/font_2556875_0myqblm2y33l.js"></script>
	
	<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-QQ"></use>
</svg>
</body>
</html>

gentlebreeze_zs

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
阿里矢量图三种在线引用方法

unicode 引用只支持黑白图标<!DOCTYPE html><html><head> <title>unicode 引用</title> <meta charset="utf-8">   <style type="tex.
复制链接

扫一扫