iconfont-矢量图标字体的运用
发现一个奇怪的现象:(http://m.muzhiwan.com)
这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的:
页面源代码如下:
好奇怪啊,这些个乱七八糟的xxx难道就是对应的图标?于是产生了好奇心,百度一下,发现原来这是矢量图标字体!
使用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/app/#/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
iconfont-矢量图标字体的运用的更多相关文章
- (原创)IconFont(矢量图标字体)在Winform中的应用
一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...
- Dripicons – 精美的扁平风格的免费矢量图标字体
Dripicons 是一个好看的免费图标集,有超过 90 个扁平风格的图标,适用在 Web 应用程序中使用,如:箭头,媒体,图表等等. 集合多种矢量格式(PSD,AI,EPS,PDF,SVG),也可以 ...
- Nuxt使用iconfont矢量图标
Nuxt可以使用各种前端UI框架,这些框架一般都自带的有一些icon图标可供用户使用,但是一般项目开发的时候,UI框架自带的icon是不能满足实际项目需求的,这个时候我们可以自己找一些图片放到本地项目 ...
- Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_143 每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人 ...
- Iconfont矢量图标平台全面升级
阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师p ...
- Iconfont 矢量图标库的应用
前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...
- 开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o das ...
- 图标字体(IconFont)制作
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...
- 分享一组矢量图标–UX图标字体库
以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219 科技日新月异的今天,市面上各种分辨率.各种显示精度的显示设备层出不穷, ...
随机推荐
- [CareerCup] 18.7 Longest Word 最长的单词
5.7 Given a list of words, write a program to find the longest word made of other words in the list. ...
- AsyncTask的使用
简单的AnsyTask的使用demo 1.定义一个模拟网络操作的类 package com.example.administrator.myapplication; /** * Created by ...
- 内网网段划分ciso交换机配置
内网3750交换机配置: vlan 192 192.168.101.0/24 端口: 1--8vlan 10 10.10.10.0/24 端口: 9--16vlan 172 172.16.172.2/ ...
- mysql5.7密码问题
安装: yum search mysql """mysql-server mysql mysql-devel mysql-community-server"&q ...
- 对JS原型的一些理解
一.首先给出一道经典的原型题目: var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fun ...
- CI框架不能有Index控制器
今天部署了ci框架,想用用它.创建别的控制器没什么错误.但是我创建了一个Index控制器,并访问了index方法,报错了.但是直接在方法中写输出就没事.而且方法名称改为其他部位index的也能访问. ...
- 一些变态的PHP一句话后门收集
这类后门让网站.服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的.今天我们细数一些有意思的PHP一句话木马. 利用404页面隐藏PHP小马 ...
- 数据库---MySQL常用函数总结
一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于 ...
- 安装Arch Linux(桌面环境)
安装xorg-server # pacman -S xorg-server xorg-server-utils xorg-xinit 安装显卡驱动 如果不知道是什么显卡,就使用以下命令查看 # lsp ...
- mvn打包idea项目
首先 通过cmd进入docs 然后用cd命令进入项目文件夹所在路径 然后输入mvn -Dmaven.test.skip=true package//-Dmaven.test.skip=true跳过测试