美文网首页
iconfont 彩色图标引入

iconfont 彩色图标引入

作者: 我就是看看哦 | 来源:发表于2021-12-03 15:41 被阅读0次

1、demo 测试效果

<!DOCTYPE html>
<html>

<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>
        .svg-icon {
            /* 通过设置 font-size 来改变图标大小 */
            width: 1em;
            height: 1em;
            /* 图标和文字相邻时，垂直对齐 */
            vertical-align: -0.15em;
            /* 通过设置 color 来改变 SVG 的颜色/fill */
            fill: currentColor;
            /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
            overflow: hidden;
        }
    </style>
</head>

<body>

    <svg class="svg-icon" aria-hidden="false">
        <use xlink:href="#icon-q-flash"></use>
    </svg>
</body>

</html>

2、在vue项目中引用

2.1 引入iconfont文件下面生成的 symbol 代码 iconfont.js

//html 引入 iconfont.js 放入public 文件夹下面
<script src="iconfont.js"></script>
//main.js 引入  
import "@/assets/iconfont.js"

引入成功后会生成svg文件


svg

2.2 引入svg icon 的样式

.svg-icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
  normalize.css 中也包含这行 */
  overflow: hidden;
}
.custom-icon{
  width: 40px !important;
  height: 40px !important;
}

2.3挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

相关文章