Zoomla!逐浪CMS官网

最新版本号[免费下载]
逐浪软件

2018年最完整5大网页设计图标解决方案:Font Awesome奥森图Unicode、CSS 和、Font以及国产zfont图标集


作者:本站编辑 发布时间:2018-03-03 来源:佚名 点击数: 分享网址


网上有很多高质量的图标,基于icon的关键词能在Google上搜索到不少内容,不考虑版权外还要修改大小、颜色等等,现在介绍一些替代方案:Unicode、CSS 和 Font,它具有更高的灵活性。

方案一:Font Awesome奥森图标

一套绝佳的图标字体库和CSS框架(奥森图标),可以通过http://code.z01.com/Boot/font.html 获取,共675个图标,可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。 

使用Font Awesome图标最大的好处是兼容性高,ie8下完整浏览不是问题。

QQ截图20180303081053.jpg

方案二:Unicode(维基百科

维基百科中:

Unicode(中文:万国码、国际码、统一码、单一码)是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码,使得电脑可以用更为简单的方式来呈现和处理文字。

Unicode以16进制表示,例如一些图标可以表示为(一些平台会自动转换成emoji,如iOS):


捕获.JPG

☀2600

☁2601

☂2602

☃2603

☄2604

2605

2606

2607

2608

2609

260a

260b

260c

260d

☎260e

260f

2610

☑2611

2612

2613

☔2614

☕2615

2616

2617

☘2618

2619

261a

261b

261c

☝261d

261e

261f


相比Unicode,好处在于更小的体积,以及能够快速更改颜色等。
更多请至:http://jrgraphix.net/r/Unicode/2600-26FF

方案三:CSS


cssicon


上图中内容均为css实现,可能你觉得这些很简单,甚至有些粗糙,但他在当今HTML5+CSS3的配合下能完成不少有意思的互动,由于设备迭代速度很快,近年来也再也没有IE6的迷之Bug的困扰了。

更多请至:http://cssicon.space/#/

方案四:Font字体

用图标字体来代替图标是当下最流行且优雅的解决方案,它能如普通字体一样指定各种属性,主要有两种字体:AwesomeMaterial icons,这两者均为Web字体,需要在CSS中使用@font-face加载,二者的用法上都差不多,一下以Google的font Material icons 来示例。


googlefont


Web字体的加载

Google这个 Material icons 字体有个对应的API,很方便

复制<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

但是由于你懂的原因不太好用,字体也可下载到本地加载:

复制@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),       local('MaterialIcons-Regular'),       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');}

可以为字体指定初始样式(非必要):

复制.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';}

如果有了上面的字体样式初始化,就可以直接使用material-icons类来调用图标:

复制<i class="material-icons">face</i>

也可以直接指定内容 font-family: 'Material Icons'来调用,例如:

复制#main .reply a:before {
    font-family: 'Material Icons';
    content: "reply";
    padding-right: .3em;
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 1.25em;}

更多请至:Awesome Material icons


方案五:zFont图标集

这是由业界领先的Zoomla!逐浪CMS团队黄页的图标,目前共214个,解决了诸如svg矢量不兼容的问题,并与asesome奥森图标完整兼容,并在http://code.z01.com 平台进行全面开放。

另外一个好处就是速度快,比国外cdn访问支持更好,同步支持http://和https://(就是兼容SSL访问引用啦:)

使用此图集方法有二:一是基于在http://code.z01.com 平台直接获取,简而言之就是调用:

@import url("https://code.z01.com/Zfont.css");
通过引用上面一行,可以直接调用“逐浪云”高端webfont字体库,或访问www.ziti163.com/webfont获取自定义字体。

方法二是下载免费强大能够建设网站、OA、电商和移动平台的Zoomla!逐浪CMS,内部会直接集成,如下图标:

QQ截图20180303081614.jpgQQ截图20180303081624.jpg

[ERR:(CopyRight)不可识别的扩展函数标签]
本文责任编辑: 本站编辑  加入会员收藏夹 点此参与评论>>
当前网址: 复制本网址,发给QQ/TM/MSN上的同行或其他朋友

+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
经营许可证号:工商3601002021063 沪ICP备09077823号 沪公网安备31011502000316号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网

展开
微信