专栏首页惶心 - 技术博客Web Icon 123 - 网页内图标的调用
原创

Web Icon 123 - 网页内图标的调用

文章渲染图

之前 保罗 在使用 php 写他的第一个个人主页的时候,在他的群里提到了 Font-Awesome 这个项目。当时还是纯小白一个,啥也听不懂。直到后来,看了几篇科普的文章,在2018年1月4日第一次在本地环境调用 Font-Awesome

Font-Awesome 是一个歪果仁做的项目,直到 4.7.0 为止都是完全免费并且开源,5.0版本开始引入商业化模式,并且闭源;所以目前大部分个人开发者使用的都是 4.7.0 版本。同时 4.7.0 版本还有着非常完善的CDN(内容分发网络)公用库支持,比如国内的 BootCDN ,国外的 cdnjs ,还有全球通用的 jsDelivr 。个人开发者(甚至企业)可以借助CDN快速在自己的服务上部署 Font-Awesome,降低服务器负载并节约流量。

Font-Awesome 的调用方式十分方便。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
<i class="fa fa-youtube"></i>

但是因为Font-Awesome是歪果仁做的项目,虽然也有部分中国本地化的图标(比方说微信、微博),但是还是不全。比如不含有 网易云音乐、Bilibili 等网站的图标。同时所有图标只有大约 700 个,在有些时候并没有太好的选择;也有的时候会造成重复的问题,降低访客的体验。


Iconfont+ 是阿里云在2016年创立的平台;刚开始只是为了内部使用,后期对公众开放。

设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

值得一提的是,Iconfont 上面所有的图标都可以通过 阿里云的CDN alicdn.com 免费调用;并且可以将多个图标添加至一个项目内,通过代码让所有选择的图标可以在网页里自由调用。

Iconfont的图标由众多知名或不知名的设计师设计,并且开放给公众免费下载、调用;图标数量何止千千万万。而因为设计师都会是中国人,自然也少不了中国本地化的图标。

根据官方的教程,这里提供一种最简单的调用方式。这里有一篇官方的说明,也可以阅读:https://see.wtf/g0xJu

首先你需要打开 iconfont.cn ,然后使用 新浪微博 或者 GitHub 登入。使用中文或者英文搜索你所需要的图标,把鼠标移到想要的图标上方,然后点击“购物车”按钮。重复此步骤选择完所有图标以后,点击右上角的购物车按钮,然后把所有图标全部添加到一个项目。然后进入项目,选择 Unicode 代码。

添加描述

复制所有代码,然后:

@font-face {
  font-family: 'iconfont';  /* project id 637591 */
  src: url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.eot');
  src: url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.svg#iconfont') format('svg');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
<i class="iconfont">&#xe658;</i>

Google Material Icons 是 Google 发布的 Material 设计标准 配套的图标。图标大多是以 基础、扁平化 作为标准,比较适合定制网站的功能性按钮。

Google Material Icons 可以通过 Google Fonts 调用。Google Fonts 的域名 fonts.googleapis.com 目前在中国解析到 Google 在 北京 或者 上海 的BGP线路,访问速度显然是不错的。

调用方法如下:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet">
<i class="material-icons">done</i>

综合来说,Font-Awesome 无疑是非常优秀的项目,并且已经被国内外开发者广泛使用。CDN支持也非常全面。但是使用的人数多了,总不免会有重复的问题。这个项目已经转向商业化,最后完全免费的版本停留在 4.7.0,可以认为不会再被更新;加上图标较少,个人不太推荐大量使用,仅仅作为图标补充即可。但是 Font-Awesome 有一个好处就是调用非常简单,引入一个css,html引用相应的 <i> 标签即可,比较适合入门开发者体验 Web Font 的魅力。

Iconfont+ 由成千上万的设计师设计,风格、质量各异。但是icon数量非常多,并且仍然在持续增加;加上 alicdn 的加持和优秀的本地化,尽管调用方式略微麻烦,但是是非常值得尝试使用的一套图标。

Google Material Icons 国内走BGP线路,速度非常可观。加上和 Material Design 适配的设计样式,非常适合在各种环境使用。但是唯一需要注意的是数量不算太多,而且都是偏向于功能性的图标。所以有些时候可能需要另外两种图标库的补充才可以完成一整个项目的设计。


感谢你在 腾讯云+社区 阅读我的文章。我是惶心,是 惶心 - 技术博客 的博主。

如果你喜欢我的文章,你可以在下面点一个赞,或者前往我的博客互动留言。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP 笔试 + 面试题

    本章主要介绍常见的 PHP 笔试 + 面试题,包括: ---- 基础及程序题 数据库技术题 综合技术题 项目及设计题 ---- 基础及程序题 [1] 写一...

    echobingo
  • 安装php7

    下载php7 wget http://cn.php.net/distributions/php-7.0.27.tar.gz 安装依赖 yum -y instal...

    零月
  • PHP相关概念及配置

    php MIME,http,html MIME:MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型 ...

    若与
  • PHP 数组

    本章主要介绍 PHP 数组的一些应用: <?php // 带数组下标的数组 $paper[] = "Ma"; $paper[] = "Hao"; for ($...

    echobingo
  • 实用的 PHP 技术

    本章主要介绍一些实用的 PHP 技术应用: <?php echo "<pre>"; printf("The result is %.2f\n", 2.345)...

    echobingo
  • PHP 基础之 PHP 函数与对象

    本章主要介绍 PHP 的函数与对象的一些应用: <?php // PHP 函数与对象 print("test"); // 或 print "test"...

    echobingo
  • PHP rabbitmq Work queues

    RabbitMQ是流行的开源消息队列系统,用erlang语言开发。RabbitMQ是AMQP(高级消息队列协议)的标准实现。如果不熟悉AMQP,直接看Rabbi...

    零月
  • redis用法分析redis基本介绍PHP操作redis服务器python使用redis总结

    redis基本介绍 redis也是一个内存非关系型数据库,它拥有memcache在数据存储上的全部优点,而且在memcache的基础上增加了数据持久性功能,re...

    若与
  • 虐哭无数人的烧脑刑侦科推理题,程序员一秒解题

    源 / 程序员头条 近日,@江苏网警 发布了一套名为“2018 年刑侦科推理试题”的微博,这条微博发布后,很快就引起了网友的广泛讨论,不少网友直说写满了好几张 ...

    顶级程序员
  • HDU 2157 How many ways??(简单线性DP | | 矩阵快速幂)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2157 这道题目很多人的题解都是矩阵快速幂写的,矩阵快速幂倒...

    ShenduCC

扫码关注云+社区

领取腾讯云代金券