WEB端使用阿里图标

 

阿里图标官网

web端需要插入小图标可以有三种实现方式(除了插入image图片)。

  1. 首先进入阿里图标官网注册账号,在资源管理里选择我的项目,找到+号选择新建项目,比如first-icon。
  2. 到图标库选择需要的图标添加入库,添加完成后在购物车里选择添加至项目first-icon。
  3. 进入我的项目,找到first-icon,这里有三种引用方式:Unicode引用、font-class引用以及symbol引用。

Unicode引用

  • 我的项目里选择Unicode并生成代码,将生成的代码复制到你的.css样式表中,比如
@font-face {
  font-family: 'iconfont';  /* project id 2284330 */
  src: url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.eot');
  src: url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.woff') format('woff'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.svg#iconfont') format('svg');
}
  • 定义使用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;
}
  • 挑选相应的图标并获取字体编码,复制图标代码应用图标
<span class="iconfont">&#xe699;</span>

font-class引用

我的项目里选择Font class并生成代码,将生成的代码复制到你的.html文件中,比如

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2284330_oyyaj8n4uo.css"/>

选择相应的图标并获取类名iconfont,复制图标代码应用图标

<span class="iconfont">&#xe699;</span>

symbol引用

我的项目里选择Symbol并生成代码,将生成的代码复制到你的.html文件中,比如

<script type="text/javascript" src="//at.alicdn.com/t/font_2284330_bq0x2xghcxv.js"></script>

加入通用css代码(引入一次就行)

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

选择相应的图标并获取类名,复制图标代码给href值应用图标

<svg class="icon" aria-hidden="true">
	<use xlink:href="#iconcancel"></use>
</svg>

 

 

 

 

 

 

 

 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页