css字体图标

需要先将字体放到项目下

<style>
        @font-face {
            /* 名字随意取 */
            font-family: 'heibai';
            src: url("font/maobi.ttf");
        }
        p {
            font-family: 'heibai';
        }
    </style>

字体图标

把需要用到的字体图标加入购物车，点购物车，下载代码

Unicode 引用 

1. @font-face {
     font-family: 'iconfont';
     src: url('iconfont.ttf?t=1628593048609') format('truetype');
   }

2. li p:nth-of-type(1) {
   
           font-family: "iconfont";
   
           font-size: 24px;
   
         }

3. 挑选相应图标并获取字体编码

   <p>&#xe62e;</p> 

   font-class 引用

 把需要用到的字体图标加入购物车，点购物车，下载代码；下载完成是个压缩包，整个解压放到项目文件里

1. 引入css

   <link rel="stylesheet" href="./css/iconfont.css" />

2.  注意修改iconfont.css里的路径

   src: url('../font/iconfont.ttf?t=1628593048609') format('truetype');

    此时自动生成类名，挑选相应图标并获取类名，应用于页面（class里的iconfont是font-family取的，可自行修改）

   <p class="iconfont icon-dianying"></p>