如何引入iconfont字体图片和网页标题logo

千面狐～

已于 2022-09-15 17:15:53 修改

阅读量531

点赞数 1

文章标签： html 前端

于 2022-09-15 17:14:49 首次发布

本文链接：https://blog.csdn.net/hutongkoudemihu/article/details/126872761

版权

初步准备

第一步：

第二步：

第三步：

引入方式分为三种：

unicode、font-class、symbol

unicode分为在线链接与本地链接：

unicode在线链接：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fontIcon</title>
    <style>
      /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
      @font-face {
        font-family: "iconfont"; /* Project id 3649984 */
        src: url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.woff2?t=1663227506310")
            format("woff2"),
          url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.woff?t=1663227506310")
            format("woff"),
          url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.ttf?t=1663227506310")
            format("truetype");
      }
      .iconfont{
        font-family: 'iconfont';
        font-size: 100px;
        color: red;
      }
    </style>
  </head>
  <body>
    <span class="iconfont">&#xe65e;</span>
  </body>
</html>

unicode本地链接：

下载完成后，打开解压后的文件夹：

将字体文件放入需要使用图标的网页文件所在的目录中

将css文件中的内容copy到需要字体图标的文件的样式中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fontIcon</title>
    <style>
      @font-face {
        font-family: "iconfont"; /* Project id 3649984 */
        src: url("iconfont.woff2?t=1663228358720") format("woff2"),
          url("iconfont.woff?t=1663228358720") format("woff"),
          url("iconfont.ttf?t=1663228358720") format("truetype");
      }

      .iconfont {
        font-family: "iconfont" !important;
        font-size: 50px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .icon-xiaoqiche:before {
        content: "\e65e";
      }
    </style>
  </head>
  <body>
    <span class="iconfont">&#xe65e;</span>
  </body>
</html>

font-class在线链接：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3649984_sym0ofmipq.css">
  </head>
  <body>
    <span class="iconfont icon-xiaoqiche"></span>
  </body>
</html>

font-class本地引入方法:

将红色框中的文字文件引入到目标文件夹

symbol的在线链接引入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="//at.alicdn.com/t/c/font_3649984_sym0ofmipq.js"></script>
    <style type="text/css">
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiaoqiche"></use>
      </svg>
  </body>
</html>

symbol的本地引入：

将下载后的文件夹中的js文件引入

style和body里面的内容与symbol的在线引入的内容是一致的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./iconfont.js"></script>
    <style type="text/css">
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiaoqiche"></use>
      </svg>
  </body>
</html>