阿里字体图标的完整引用流程 - 前端

首页 > 博客列表 > 阿里字体图标的完整引用流程

博主信息

博文 31

粉丝 2

访问量 26831

专题推荐

更多>

- 作者：霏梦

一、登录和下载

登录https://www.iconfont.cn ，通过github或者微博，如果没有账户，可以在线申请注册
在【图标库】栏目里，找到你喜欢想要的图标，把它添加入库
单击右上角【购物车】的图标，可以看到你收藏的图标
将你收藏的图标可以添加到项目，如果没有项目，创建一个，如果有就添加到已有项目即可
在【图标管理】里，可以查看你创建的项目以及图标
我发起的项目里，将图标下载到本地，解压并改名font,并将它复制到我们的开发项目下面
二、如何使用

打开font/demo_index.html
里面有写好的步骤，照着抄，只是要写路径修改改你项目的路径
1、font-class 引用
创建demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--第一步：引入字体图标的类样式 href一定是你所在的位置-->
    <link rel="stylesheet" href="font/iconfont.css">
    <title>阿里字体图标的使用方法1</title>
     <style>
         /* 加点样式 */
        .test{
            font-size: 36px;
            color: orange;
        }
     </style>
</head>
<body>
    <!-- 第二步：获取图标名 -->
    <div><span class="iconfont icon-icon-test test"></span></div>
</body>
</html>

打开网站
2、Unicode 引用
兼容性好
创建一个font-face.css文件，修改成自已的目录路径

@font-face {
    /* URL修改成自已的目录 */
    font-family: 'iconfont';
    src: url('font/iconfont.eot');
    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('font/iconfont.woff2') format('woff2'),
        url('font/iconfont.woff') format('woff'),
        url('font/iconfont.ttf') format('truetype'),
        url('font/iconfont.svg#iconfont') format('svg');
  }

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里字体图标的使用方法2</title>
    <!-- 拷贝项目下面生成的 @font-face -->
    <link rel="stylesheet" href="font-face.css">
    <style>
        /* ：定义使用 iconfont 的样式 */
        .iconfont {
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                color: orange;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
}
    </style>
</head>
<body>
    <div>
        <span class="iconfont"></span>
    </div>
</body>
</html>