字体图标的三种引用方法(二)

Font class引用

字体图标的引用准备工作:首先搜索iconfont(字体图标矢量库)在其中找到自己需要用到的图标添加到购物车,然后添加到项目中,点击下载至本地并解压缩。

font-class 引用介绍

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

兼容性良好,支持 IE8+,及所有现代浏览器。
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体,所以多色图标还是不支持的。

font-class 引用步骤

fontclass引用第一步:新建基本HTML项目,将下载的css文件复制到项目中的css文件夹下;

第二步:打开下载的文件夹中的html文件(里面显示你之前挑选到项目里的字体图标),点击fontclass,第一步:引入项目下面生成的 fontclass 代码
在项目下新建一个html文件,将拷贝的fontclass代码放到style里面(如下代码)

在这里插入图片描述
****注意:****改变当前文件夹路径为css文件夹下的路径,例如:
在这里插入图片描述
第三步:挑选相应图标并获取类名,应用于页面(例如):
在这里插入图片描述
在这里插入图片描述
如图所示该字体图标名为iconkefu2

好啦!!!!!!

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值