字体图标使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46159033/article/details/123842697

一、下载

前言

公司UI美工的小姐姐没有上传字体图标怎么办?! 那就自己动手吧￣▽￣

一、下载

首先是找到免费的网站去下载,当然是www.iconfont.cn 里面随便找,不过要先注册emmm

下载之后,点开文件中的网页也是自带的引入方法

二、使用方法

新建fonts文件,将下载的其中四个文件放入,方便外联

引入代码:

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

方法1:使用2个类名引入字体图标

第一个类名iconfont 目的是告诉这是字体图标.不是普通的文字
第二个类名是字体图标自带的，用来告诉使用哪个小图标

代码如下

  <style>

    .icon-icon-test1 {
      color: red;
      font-size: 60px;

    }
  </style>

   <body>

    <i class="iconfont icon-icon-test1" > </i>

   </body>

方法2:使用`unicode`编码

直接标签放入编码

html代码:

 <i class="iconfont"> &#xe63b; </i>

css代码:

.iconfont {
      fontsize:30px;
      color:red;
}

方法3:使用伪元素字体图标

保留unicode编码后四位,前面所有编码用 \ 代替

css代码如下

 div {
      font-family: 'iconfont';
    }

div::after {
    content: "\e63b";
}

注意：使用伪元素字体图标，一定要声明字体。 font-family: 'iconfont'

方法4:使用在线字体图标

在阿里字体图标网页中查看在线链接

<link rel="stylesheet" href="http://at.alicdn.com/t/font_3276121_9b9eepa4f57.css">
<!-- 标签装字体 -->
<i class="iconfont icon-xxx"></i>

复制链接引入时,记得手动添加http: 或者https
好了就这里结束了,下次摸鱼再来分享

css字体图标的使用

前言

一、下载

二、使用方法

方法1:使用2个类名引入字体图标

方法2:使用unicode编码

方法3:使用伪元素字体图标

方法4:使用在线字体图标

方法2:使用`unicode`编码