IconFont字体图标的下载与使用

如何在Iconfont下载字体图标

如何在IconFont-阿里巴巴矢量图标库下载字体图标—字体图标如何使用

一、IconFont的下载

IconFont,图标字体也叫字体图标,就是字体做的图标。可以通过设置字体的方式改变图标的样式,受到近些年 扁平化设计 的影响,越来越多的图标都开始使用 IconFont

1、首先打开官方网址

IconFont-阿里巴巴矢量图标库
《IconFont字体图标的下载与使用》

2、登录相关账号

《IconFont字体图标的下载与使用》

3、添加需要的图标入库

《IconFont字体图标的下载与使用》
在IconFont找到需要的图标点击添加入库

4、添加到项目

《IconFont字体图标的下载与使用》
添加入库后,点击右上角的购物车按钮
《IconFont字体图标的下载与使用》
点击添加到项目

5、新建项目

《IconFont字体图标的下载与使用》

6、下载到本地

《IconFont字体图标的下载与使用》
下载完成解压到本地,放入工程目录即可使用
《IconFont字体图标的下载与使用》

二、IconFont的使用(Unicode 引用)

1、文件位置摆放

下载完成后,将iconfont放入根目录的fonts文件夹中
《IconFont字体图标的下载与使用》
考虑到兼容性问题,所以要将四个文件都需要复制
《IconFont字体图标的下载与使用》

2、字体文件引入

《IconFont字体图标的下载与使用》
打开解压文件夹里面的iconfont.css,复制@font-face和.iconfont这两段段代码,实现Unicode 引用

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1590589819200'); /* IE9 */
  src: url('iconfont.eot?t=1590589819200#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1590589819200') format('woff'),
  url('iconfont.ttf?t=1590589819200') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1590589819200#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3、HTML使用字体图标

《IconFont字体图标的下载与使用》
打开demo_index.html文件,选择需要的字体图标
《IconFont字体图标的下载与使用》
复制字体图标代码,同时添加class样式
《IconFont字体图标的下载与使用》《IconFont字体图标的下载与使用》
最终在浏览器中实现效果

三、IconFont的使用新方法(Symbol 引用)(推荐)

1、JS文件引入

1、将解压缩后的文件夹中的iconfont.js文件放入项目根目录的js文件夹中
《IconFont字体图标的下载与使用》
同时在html文件中引入js文件
《IconFont字体图标的下载与使用》

2、CSS文件引入

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

将这段代码复制到公共样式的css文件中

3、字体图标应用

挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

将#icon-xxx替换为#icon-diqiu,在浏览器中即可显示字体图标效果
《IconFont字体图标的下载与使用》
《IconFont字体图标的下载与使用》

    原文作者:wingchiehpih
    原文地址: https://blog.csdn.net/wingchiehpih/article/details/105875227
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞