开源图标字体 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技术,图标矢量图一开始都应合并转化为字体库. 优点: 减小体积,字体文件比图片要小 图标保真缩放,解决 ...
随机推荐
- R语言数据类型与数据结构
一.数据类型 5种 1.character 字符 2.numeric 数值 3.integer 整数 一般数字的存储会默认为数值类型,如果要强调是整数,需要在变量值后面加上 L. x <- 5L ...
- fputc, fputs, putc, putchar, puts - 输出字符和字符串
总览 (SYNOPSIS) #include <stdio.h> int fputc(int c, FILE *stream); int fputs(const char *s, FILE ...
- Algorithms4th 1.1.25 欧几里得算法——数学归纳法证明
欧几里得算法的自然语言描述 计算两个非负整数p和q的最大公约数: 若q是0,则最大公约数为p.否则将p除以q得到余数r,p和q的最大公约数即为q和r的最大公约数. 数学归纳法证明 基础步骤: 若q = ...
- centos7系统之telnet命令rpm包安装
centos7系统之telnet命令rpm包安装 1. 下载安装包 rpm包下载位置:http://vault.centos.org/6.3/os/x86_64/Packages/ [root@ywb ...
- Spring 事物机制(总结)
Spring两种事物处理机制,一是声明式事物,二是编程式事物 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...
- web项目使用fastdsf上传|下载文件
在上传代码中添加一下代码 suffix=suffix.substring(1); fast.FastDFSFile file = new fast.FastDFSFile(mFile.getBytes ...
- Flutter pubspec.yaml配置文件
name: flutter_app1 # 应用名称 description: A new Flutter application. # 应用描述 # The following defines the ...
- AGC003[BCDEF]题解
2018-12-28 有点累EF明天再写叭=v= 2018-12-29 update EF B - Simplified mahjong 可以注意到 一段连续的非0序列都可以凑出 就是显然%2=0的可 ...
- 刷题or源码链接
Hadoop权威指南的Github https://github.com/tomwhite/hadoop-book hadoopAPI http://hadoop.apache.org/docs/cu ...
- Ubuntu中可以卸载的软件(持续更新)
sudo apt-get -y --auto-remove purge unity unity-2d* sudo apt-get -y purge empathy sudo apt-get -y pu ...