字体图标iconfont的使用

leader755

发布于 2022-03-09 14:40:15

4.5K00

代码可运行

文章被收录于专栏：万丈高楼平地起万丈高楼平地起

运行总次数：0

代码可运行

1.将从阿里矢量图标库中图标并下载到本地

2.使用图标（三种使用方式）

1.使用 FontClass（最简单方式，支持字体样式定义但不支持多色字体）

fontClass 支持字体的样式定义，但不支持多色字体，兼容性良好，当要替换图标时，只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。

第一步：引入项目下面生成的 fontclass 代码：

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

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

<!-- 示例 -->
<h2>FontClass使用</h2>
<p><span class="iconfont icon-shouye"></span><span>首页</span></p>
<p><span class="iconfont icon-ziyuan"></span><span>购物车</span></p>
<p><span class="iconfont icon-gerenzhongxin"></span><span>个人中心</span></p>

<!--使用css定义样式-->
.iconfont { font-size: 30px; color: red; font-family: myFirstFont; font-weight:
bold; }

2.使用 Unicoded(兼容性最好，支持字体的样式定义但不支持多色字体)

支持字体的样式定义，但不支持多色字体，兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。

第一步：拷贝项目下面生成的 @font-face

引入以下文件：

注意需要将对应的文件引入，和注意修改引入文件时的路径。

@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff2")
      format("woff2"), url("iconfont.woff") format("woff"), url("iconfont.ttf")
      format("truetype"), url("iconfont.svg#iconfont") format("svg");
}

第二步：定义使用 iconfont 的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>

<!-- 示例 -->
<h2>Unicoded的使用</h2>
<p><span class="iconfont">&#xe61f;</span><span>首页</span></p>
<p><span class="iconfont">&#xe615;</span><span>购物车</span></p>
<p><span class="iconfont">&#xe60d;</span><span>个人中心</span></p>

<!-- 示例 -->
<h2>Unicoded的使用</h2>
<p><span class="iconfont icon-shouye"></span><span>首页</span></p>
<p><span class="iconfont icon-shouye"></span><span>购物车</span></p>
<p><span class="iconfont icon-personal"></span><span>个人中心</span></p>

3.使用 Symbol（兼容性最差，支持字体的样式定义且支持多色字体）

支持多色图标了，通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。兼容性较差，支持 IE9+，及现代浏览器。浏览器渲染 SVG 的性能一般，还不如 png。

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：设置图标的宽高

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

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

<!-- 示例-->
<h2>Symbol的使用</h2>
<p>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shouye"></use>
  </svg>
  <span>首页</span>
</p>
<p>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-ziyuan"></use>
  </svg>
  <span>购物车</span>
</p>
<p>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-gerenzhongxin"></use>
  </svg>
  <span>个人中心</span>
</p>

<!--定义样式-->
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor;
overflow: hidden; font-size: 50px; color: red;<!--不生效-->
}

注意：iconfont 图标 symbol 引用方式，有的图标不能通过设置 color 样式来修改颜色的解决办法

原因：当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过 symbol 获取图标时会在 svg 的 path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在 symbol 的 js 文件中程序删除 fill 属性。

解决办法：

下载 Js 文件后，用 Notepad++打开，然后用正则表达式查找：*fill=”#……” *，替换。
iconfont.cn 上，全选项目中的文件，应用批量操作–>批量去色

成果展示：

3.:before/:after 里 iconfont 的使用方法

:before/:after 是伪元素，fontawesome 是在伪元素的 content 加入不同的 Unicode 来渲染不同的图标的。可以放在 content 里啊，直接放在 html 里的那是字符实体编码，比如 其中&#是开头用以标明这是字符实体，x表示这是十六进制，而 CSS 的 content 接受的也是 16 进制的 Unicode 编码，所以可以直接写 content: "\e7bb"; unicode：&#e61f; ====> 伪类 content :’\e61f’;

.box:before {
  font-family: "iconfont" !important;
  font-size: 16px;
  color: red;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e61f";
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-22，如有侵权请联系 cloudcommunity@tencent.com 删除

unicode

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

unicode

css

登录后参与评论

0 条评论

热度