字体图标iconfont的使用


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

icon.gif

image.png

2.使用图标(三种使用方式)

1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体)

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

第一步:引入项目下面生成的 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+,及所有现代浏览器。支持按字体的方式去动态调整图标大小,颜色等等。
image.png

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

引入以下文件:
image.png
注意需要将对应的文件引入,和注意修改引入文件时的路径。

@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。
image.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 属性。

解决办法:

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

成果展示:

image.png

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

:before/:after 是伪元素,fontawesome 是在伪元素的 content 加入不同的 Unicode 来渲染不同的图标的。
可以放在 content 里啊,直接放在 html 里的那是字符实体编码,比如&#xe7bb; 其中&#是开头用以标明这是字符实体,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";
}

文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
table表格拖拽 table表格拖拽
el-table 的拖拽使用 Sortable.js官方文档 :https://github.com/SortableJS/Sortable 1. 通过 npm 使用 sortable//安装sortablejs npm install s
2021-06-27
下一篇 
开源的git 服务器 开源的git 服务器
1、GitLab 开源版本简介:GitLab 是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过 Web 界面进行访问公开的或者私人项目。它拥有与Github类似的功能,能够浏览源代码,管理缺
2021-06-20
  目录