Top

使用iconfont图标字体


有点前端知识的朋友应该都知道图标字体,其中最著名的图标字体一个是国外的FontAwesome,还有一个就是国内阿里巴巴旗下的iconfont。

使用图标字体的三大好处:

  • 与传统的图片形式相比,图标字体在任何设备上放大多少倍都不会失真(类似与svg)
  • 节省开发时间和成本,一般图标都需要美工来制作不仅耗时耗成本,而且图片过多还会影响网站的访问速度,这就又要意味着又需要更高配置的服务器。而图标字体只需要的几段代码而已。
  • 能对图标进行自定义样式,可以对图标进行颜色、形状的操作,比如支持支持配置颜色、背景颜色、外轮廓、鼠标经过、点击也能改变颜色、形状等等。

iconfont官网:https://www.iconfont.cn

进入iconfont网站后,需要点击右上角搜索框右边的“个人”图标,我们可以选择GitHub或微博进行登录。登录后就可以开始寻找你想要的图标了。

单个下载使用

如果你只是想把某个单个的图标下载使用,那么你可以在图标集合中把鼠标指向你想要的图标,实时展现三个按钮,分别是“添加至库”、“收藏”、“下载”,有很多人看到第一个购物车图标以为这些图标是收费需要购买的,其实iconfont中的图标都可以免费使用的。点击下载图标,接着就会弹出一个窗口,让你对你所选择的图标进行颜色和大小的设置,然后在下方还有三个椭圆形的按钮,可以根据你的需要来下载不同的图片格式。

多个图标在前端中使用

我博客上的其他图标字体使用的是FontAwesome,而只有分享图标使用的是iconfont图标字体,如果你也想类似于我这种形式,将iconfont的多个图标应用于网站上,请接着往下看:

首先将你想要的图标都添加到库中,添加的差不多了之后,就点击导航栏最右边的购物车按钮,这时会展开一个侧边栏,点击“下载代码”按钮,下载下来一个名为download.zip的压缩包,里面有很多的文件,而我们只需要一个文件即可,就是iconfont.css,另外感兴趣的可以打开demo_index.html这个文件,它里面就是一个图标的使用说明,这个感兴趣的可以自行去看。

iconfont.css这个里面的代码全部复制粘贴到你网站的CSS代码中,那么代码粘贴完了又该如何去在网页中去调用他们呢?

我们先来看一下调用代码的写法:<span class="iconfont icon-xx"></span>

代码中的xx其实就是图标的名称,但这个名称并不是随便写的,因为你当初在iocnfont挑选的是哪些图标就填写哪些图标的名称。回到CSS代码中,找到我们刚才粘贴的那段代码,除了第一个.iconfont这个类,还有很多icon-开头的CSS类,而-后面的正是调用代码中的图标名称,比如,代码为:<span class="iconfont icon-QQ"></span>,那么在浏览器上显示的图标就是QQ图标。

自定义图标样式

自定义图标样式这个就简单了,还是回到我们的CSS代码中,在.iconfont这个类中,控制着全局的iconfont图标的样式属性,比如图标的大小:font-size,还可以设置颜色:color、背景颜色:background-color等等,一旦这个类中的属性被设置后,将会作用于全部的iconfont图标

那么想控制单个或者是某几个图标的样式呢?那么就在.iconfont下方找到icon-开头的类,在它们的类中来定义他们的样式。比如我想单独设置QQ的图标颜色,就在icon-QQ类中,设置属性color



未经允许不得转载: 小吴博客 » 使用iconfont图标字体