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. HDU-5378 概率DP

    题意:给定一棵有n个节点的树,现在要给节点附1~n的权值(各节点权值不能相同),一棵子树的领袖就是子树中权值最大的节点,问有多少种分配方案使得最后有恰好K个领袖. 解法:这道题一看以为是树上的计数问题 ...

  2. Go的学习 sort

    1.排序操作主要都在 sort包中,导入就可以使用了 2.sort.Ints对整数进行排序 package main; import ( "fmt" "sort" ...

  3. B/S架构和C/S架构介绍

    一.C/S架构 C/S架构及其背景 C/S架构是一种比较早的软件架构,主要应用于局域网内.在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架 ...

  4. 初识Uniprot API

    Uniprot,全名Universal Protein,其整合了Swissprot.TrEMBL和PRI-PSD三大数据库,是目前使用非常广泛的蛋白质数据库 常规物种的蛋白质组学研究一般会使用Unip ...

  5. C# 枚举的声名和使用

    namespace xxxxxx { public enum EnumTextHAlign { Left = , Center = , Right = } } using xxxxxx;

  6. java连接远程服务器并执行命令

    导入必要的jar包 <dependency>  <groupId>ch.ethz.ganymed</groupId> <artifactId>ganym ...

  7. 在VMware中配置网卡之NAT模式

    为什么要在VMware中配置网卡? 因为在远程连接服务器时,需要虚拟机连接网络 虚拟机网络配置的三种模式:桥接模式,NAT模式,主机模式 NAT模式也称之为网络转换模式,两层路由: 第一层路由:物理机 ...

  8. HDU 6638 - Snowy Smile 线段树区间合并+暴力枚举

    HDU 6638 - Snowy Smile 题意 给你\(n\)个点的坐标\((x,\ y)\)和对应的权值\(w\),让你找到一个矩形,使这个矩阵里面点的权值总和最大. 思路 先离散化纵坐标\(y ...

  9. 用DELPHI中实现RAR文件解压到指定一目录

    一个RAR压缩文件,用DELPHI编的程序打开它并解压到某一目录,怎么实现的?自己搞定了例子:winrar.exe e -y C:\WINDOWS\Desktop\ghost.rar d:\ 但新的问 ...

  10. angular项目引用第三方公共js文件

    由于项目需要,领导要求在正在开发的angular项目中,引入公共js,以便进行统计计算. 于是便各种找度娘,网上有好多引用jquery插件的例子,于是便按照步骤对自身项目进行了改造,先记录一下: st ...