uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体。

更新内容

  • 新增 map android-o dashboard table qrcode printer barcode 等7个图标.

安装

npm install uiw-iconfont --save

使用

您可以使用 uiw-react.github.io/icons/ 轻松找到您要使用的图标。一旦您复制了所需图标的CSS类名,只需将图标和图标的类名(如apple)添加到HTML元素即可。

你需要链接CSS


<link rel="stylesheet" type="text/css" href="node_modules/fonts/w-iconfont.css">

用于Less:


@import "~uiw-iconfont/fonts/w-iconfont.css";

注意:它有一个w-icon-前缀。


<i class="w-icon-apple"></i>

或者使用Unicode,您可以使用Unicode网站轻松找到您要使用的Unicode图标。

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

开发

在克隆项目之后运行npm install来安装依赖,你能够做如下操作:

编译字体.svg.ttf.woff.eot等字体文件

npm run font

编译网站并提交到gh-pages分支

npm run start

相关链接

iconfont-矢量图标字体的运用:

发现一个奇怪的现象:

这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的:

页面源代码如下:

好奇怪啊,这些个乱七八糟的&#xfxxx难道就是对应的图标?

使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:

1.自由的变化大小;

2.自由的修改颜色;

3.添加阴影效果;

4.IE6也可以支持;

5.支持图片图标的其它属性,例如,透明度和旋转等等6.可以添加text-stroke和background-clip:text等属性,只要浏览器支持。

那么如何使用iconfont呢?可以有如下几种方式:

1.使用现有的开源iconfont矢量图标字体库。如

阿里icon font字库

http://www.iconfont.cn/

这个是阿里M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里图标库。

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是的。

icomoon

http://icomoon.io//#/select

可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。很酷吧!

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了,更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

2.创建自己的iconfont字体库,可以使用以上各平台的在线生成工具,也可以推荐使用一些生成iconfont的工具,如iconmoon。

3.那么具体该如何使用这种字体图标呢?其实很简单,以PC端的应用为例,只需要分三步即可完成:

以上demo使用方法详情请参考:http://www.iconfont.cn/help/iconuse.html

参考文献:

http://www.iconfont.cn/

http://www.chinaz.com/design/2012/0904/272556.shtml

http://www.weste.net/2013/12-13/94697.html

原作者:开源中国


开源图标字体 uiw-iconfont v1.2.6 发布,新增图标的更多相关文章

  1. CSS 小结笔记之图标字体(IconFont)

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  2. (转载)app ico图标字体制作

    图标字体化浅谈   在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...

  3. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...

  4. webfont应用系列(二)如何制作图标字体?

    工具: Adobe Illustrator CS5 Fontographer 5.1,下载地址 1.打开Fontographer,菜单"File"->"New&qu ...

  5. 仿站技术——获取和使用某些网站的iconfont图标字体

    前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...

  6. (原创)IconFont(矢量图标字体)在Winform中的应用

    一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...

  7. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  8. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  9. iconfont 图标字体

    iconfont 技术的主要是将图标转化为字体来减少应用体积.如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库.   优点: 减小体积,字体文件比图片要小 图标保真缩放,解决 ...

随机推荐

  1. R语言数据类型与数据结构

    一.数据类型 5种 1.character 字符 2.numeric 数值 3.integer 整数 一般数字的存储会默认为数值类型,如果要强调是整数,需要在变量值后面加上 L. x <- 5L ...

  2. fputc, fputs, putc, putchar, puts - 输出字符和字符串

    总览 (SYNOPSIS) #include <stdio.h> int fputc(int c, FILE *stream); int fputs(const char *s, FILE ...

  3. Algorithms4th 1.1.25 欧几里得算法——数学归纳法证明

    欧几里得算法的自然语言描述 计算两个非负整数p和q的最大公约数: 若q是0,则最大公约数为p.否则将p除以q得到余数r,p和q的最大公约数即为q和r的最大公约数. 数学归纳法证明 基础步骤: 若q = ...

  4. centos7系统之telnet命令rpm包安装

    centos7系统之telnet命令rpm包安装 1. 下载安装包 rpm包下载位置:http://vault.centos.org/6.3/os/x86_64/Packages/ [root@ywb ...

  5. Spring 事物机制(总结)

    Spring两种事物处理机制,一是声明式事物,二是编程式事物 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...

  6. web项目使用fastdsf上传|下载文件

    在上传代码中添加一下代码 suffix=suffix.substring(1); fast.FastDFSFile file = new fast.FastDFSFile(mFile.getBytes ...

  7. Flutter pubspec.yaml配置文件

    name: flutter_app1 # 应用名称 description: A new Flutter application. # 应用描述 # The following defines the ...

  8. AGC003[BCDEF]题解

    2018-12-28 有点累EF明天再写叭=v= 2018-12-29 update EF B - Simplified mahjong 可以注意到 一段连续的非0序列都可以凑出 就是显然%2=0的可 ...

  9. 刷题or源码链接

    Hadoop权威指南的Github https://github.com/tomwhite/hadoop-book hadoopAPI http://hadoop.apache.org/docs/cu ...

  10. Ubuntu中可以卸载的软件(持续更新)

    sudo apt-get -y --auto-remove purge unity unity-2d* sudo apt-get -y purge empathy sudo apt-get -y pu ...