Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 阿里字体图标的完整引用流程
Blogger Information
Blog 31
fans 2
comment 0
visits 27688
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
阿里字体图标的完整引用流程
霏梦
Original
1082 people have browsed it

- 作者：霏梦

一、登录和下载

  1. 登录https://www.iconfont.cn ，通过github或者微博，如果没有账户，可以在线申请注册

  2. 在【图标库】 栏目里，找到你喜欢想要的图标，把它添加入库
    图标库

  3. 单击右上角【购物车】的图标，可以看到你收藏的图标
  4. 将你收藏的图标可以添加到项目，如果没有项目，创建一个，如果有就添加到已有项目即可
    添加项目
  5. 在【图标管理】里，可以查看你创建的项目以及图标
    我的图标
  6. 我发起的项目里，将图标下载到本地，解压并改名font,并将它复制到我们的开发项目下面
    路径

    二、如何使用

  • 打开font/demo_index.html
  • 里面有写好的步骤，照着抄，只是要写路径修改改你项目的路径

    1、font-class 引用

  • 创建demo3.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <!--第一步：引入字体图标的类样式 href一定是你所在的位置-->
  7.     <link rel="stylesheet" href="font/iconfont.css">
  8.     <title>阿里字体图标的使用方法1</title>
  9.      <style>
  10.          /* 加点样式 */
  11.         .test{
  12.             font-size: 36px;
  13.             color: orange;
  14.         }
  15.      </style>
  16. </head>
  17. <body>
  18.     <!-- 第二步：获取图标名 -->
  19.     <div><span class="iconfont icon-icon-test test"></span></div>
  20. </body>
  21. </html>
  • 打开网站
    fontclass

    2、Unicode 引用

  • 兼容性好
    创建一个font-face.css文件，修改成自已的目录路径
  1. @font-face {
  2.     /* URL修改成自已的目录 */
  3.     font-family: 'iconfont';
  4.     src: url('font/iconfont.eot');
  5.     src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  6.         url('font/iconfont.woff2') format('woff2'),
  7.         url('font/iconfont.woff') format('woff'),
  8.         url('font/iconfont.ttf') format('truetype'),
  9.         url('font/iconfont.svg#iconfont') format('svg');
  10.   }
  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>阿里字体图标的使用方法2</title>
  7.     <!-- 拷贝项目下面生成的 @font-face -->
  8.     <link rel="stylesheet" href="font-face.css">
  9.     <style>
  10.         /* ：定义使用 iconfont 的样式 */
  11.         .iconfont {
  12.                 font-family: "iconfont" !important;
  13.                 font-size: 16px;
  14.                 font-style: normal;
  15.                 color: orange;
  16.                 -webkit-font-smoothing: antialiased;
  17.                 -moz-osx-font-smoothing: grayscale;
  18. }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div>
  23.         <span class="iconfont"></span>
  24.     </div>
  25. </body>
  26. </html>
  • 打开网站
    unicode
Correcting teacher：查无此人查无此人

Correction status：qualified

Teacher's comments：完成的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post