项目引入使用阿里 iconfont 图标步骤

最新推荐文章于 2024-05-11 16:37:28 发布

实习打字猿

最新推荐文章于 2024-05-11 16:37:28 发布

阅读量823

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42863549/article/details/105594095

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

# Unicode 方式引用

# 获取线上 Unicode 代码

@font-face {  /* 这一段主要是自定义字体，我们引入的icon其实就是字体，可以使用css中font编辑icon */
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1431001_hlo7w0egif.eot');
  src: url('//at.alicdn.com/t/font_1431001_hlo7w0egif.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1431001_hlo7w0egif.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1431001_hlo7w0egif.woff') format('woff'),
  url('//at.alicdn.com/t/font_1431001_hlo7w0egif.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1431001_hlo7w0egif.svg#iconfont') format('svg');
}

# 设置通用的字体样式

.iconfont{  /* 这是通用的字体样式，我们一般使用字体时 给与它一个iconfont属性，给予它一个默认样式 */
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

完整的 index.html 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>yzwsw</title>
    <style>
      @font-face {  /* 这一段主要是自定义字体，我们引入的icon其实就是字体，可以使用css中font编辑icon */
        font-family: 'iconfont';  /* project id 1431001 */
        src: url('//at.alicdn.com/t/font_1431001_hlo7w0egif.eot');
        src: url('//at.alicdn.com/t/font_1431001_hlo7w0egif.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_1431001_hlo7w0egif.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_1431001_hlo7w0egif.woff') format('woff'),
        url('//at.alicdn.com/t/font_1431001_hlo7w0egif.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_1431001_hlo7w0egif.svg#iconfont') format('svg');
      }
      .iconfont{  /* 这是通用的字体样式，我们一般使用字体时 给与它一个iconfont属性，给予它一个默认样式 */
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;}
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

# 网页中使用

<i class="iconfont">字体编码</i>

# Font class 方式引用

# 获取线上 Font class 链接

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

完整 index.html 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>yzwsw</title>
    <!-- 引入阿里图标样式 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1431001_0p8qktwee9y.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

# 网页中使用

<i class="iconfont 图标名称"></i>

参考博客：

实习打字猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目引入使用阿里 iconfont 图标步骤

# Unicode 方式引用# 获取线上 Unicode 代码@font-face { /* 这一段主要是自定义字体，我们引入的icon其实就是字体，可以使用css中font编辑icon */ font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_1431001_hlo7w0egif.eot'); src: url('...
复制链接

扫一扫

专栏目录