开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
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下查看一下元素,竟然是这样的:
页面源代码如下:
好奇怪啊,这些个乱七八糟的xxx难道就是对应的图标?
使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:
1.自由的变化大小;
2.自由的修改颜色;
3.添加阴影效果;
4.IE6也可以支持;
5.支持图片图标的其它属性,例如,透明度和旋转等等6.可以添加text-stroke和background-clip:text等属性,只要浏览器支持。
那么如何使用iconfont呢?可以有如下几种方式:
1.使用现有的开源iconfont矢量图标字体库。如
阿里icon font字库
这个是阿里M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里图标库。
fontello
在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是的。
icomoon
可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。很酷吧!
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
这是我最喜欢的字库之一了,更新比较快。目前已经有369个图标了。
Glyphicon Halflings
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
2.创建自己的iconfont字体库,可以使用以上各平台的在线生成工具,也可以推荐使用一些生成iconfont的工具,如iconmoon。
3.那么具体该如何使用这种字体图标呢?其实很简单,以PC端的应用为例,只需要分三步即可完成:
以上demo使用方法详情请参考:http://www.iconfont.cn/help/iconuse.html
参考文献:
http://www.chinaz.com/design/2012/0904/272556.shtml
http://www.weste.net/2013/12-13/94697.html
原作者:开源中国
开源图标字体 uiw-iconfont v1.2.6 发布,新增图标的更多相关文章
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- (转载)app ico图标字体制作
图标字体化浅谈 在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...
- CSS 让 fontawesome 图标字体变细
一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...
- webfont应用系列(二)如何制作图标字体?
工具: Adobe Illustrator CS5 Fontographer 5.1,下载地址 1.打开Fontographer,菜单"File"->"New&qu ...
- 仿站技术——获取和使用某些网站的iconfont图标字体
前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...
- (原创)IconFont(矢量图标字体)在Winform中的应用
一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...
- 图标字体(IconFont)制作
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...
- iOS中iconfont(图标字体)的基本使用
前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
- iconfont 图标字体
iconfont 技术的主要是将图标转化为字体来减少应用体积.如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库. 优点: 减小体积,字体文件比图片要小 图标保真缩放,解决 ...
随机推荐
- HDU-5378 概率DP
题意:给定一棵有n个节点的树,现在要给节点附1~n的权值(各节点权值不能相同),一棵子树的领袖就是子树中权值最大的节点,问有多少种分配方案使得最后有恰好K个领袖. 解法:这道题一看以为是树上的计数问题 ...
- Go的学习 sort
1.排序操作主要都在 sort包中,导入就可以使用了 2.sort.Ints对整数进行排序 package main; import ( "fmt" "sort" ...
- B/S架构和C/S架构介绍
一.C/S架构 C/S架构及其背景 C/S架构是一种比较早的软件架构,主要应用于局域网内.在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架 ...
- 初识Uniprot API
Uniprot,全名Universal Protein,其整合了Swissprot.TrEMBL和PRI-PSD三大数据库,是目前使用非常广泛的蛋白质数据库 常规物种的蛋白质组学研究一般会使用Unip ...
- C# 枚举的声名和使用
namespace xxxxxx { public enum EnumTextHAlign { Left = , Center = , Right = } } using xxxxxx;
- java连接远程服务器并执行命令
导入必要的jar包 <dependency> <groupId>ch.ethz.ganymed</groupId> <artifactId>ganym ...
- 在VMware中配置网卡之NAT模式
为什么要在VMware中配置网卡? 因为在远程连接服务器时,需要虚拟机连接网络 虚拟机网络配置的三种模式:桥接模式,NAT模式,主机模式 NAT模式也称之为网络转换模式,两层路由: 第一层路由:物理机 ...
- HDU 6638 - Snowy Smile 线段树区间合并+暴力枚举
HDU 6638 - Snowy Smile 题意 给你\(n\)个点的坐标\((x,\ y)\)和对应的权值\(w\),让你找到一个矩形,使这个矩阵里面点的权值总和最大. 思路 先离散化纵坐标\(y ...
- 用DELPHI中实现RAR文件解压到指定一目录
一个RAR压缩文件,用DELPHI编的程序打开它并解压到某一目录,怎么实现的?自己搞定了例子:winrar.exe e -y C:\WINDOWS\Desktop\ghost.rar d:\ 但新的问 ...
- angular项目引用第三方公共js文件
由于项目需要,领导要求在正在开发的angular项目中,引入公共js,以便进行统计计算. 于是便各种找度娘,网上有好多引用jquery插件的例子,于是便按照步骤对自身项目进行了改造,先记录一下: st ...