放开那个UI 妹子,让我来(上)
一、前言
- 今天要学习的内容:今天主要是稍微总结一下,页面中如何用字体代替图片,省事,省时,方便,实用!
- 小苏啰嗦:人都是有惰性的。真的。刚开始我们有一个经验丰富的美工,加上我们关系又非常好,以至于每次我都是等着她把设计图给我,我才开始码html。遇到图片的地方,会切的就自己切了,不会的,就直接让美工切图给我。成了一个不动脑子的码农!现在,美工换人了,新的美工太忙了。加上可能对我们前端交互不熟悉,现在原型图出来,我能不找美工就不找美工。自己动手!呵呵。
二、正文
- 如果下面两张图(右击图片-在新窗口打开图片,可以看到大图,更清晰),除了文字,上面的图片你平时是怎么做的?如果也是用图片代替的,那么今天你就会学到新技能;如果你不是用图片,好吧,这篇文章对你来说out了。你可以不用往下看啦。哈哈!
上面图片中用到的就是Font Awesome的矢量图标,它可以直接用CSS对它们进行大小、颜色、阴影或者其它任何支持的效果进行更改。主要概括如下:
- 我们为什么要使用图标?
图标可以传送大量信息,帮助人们语义化理解所看到的东西,现在我们出去看到各种建筑物都是直接用图标表示,而不是用文字,图标能更形象化的去表达所想表达的意思。所以说使用图标是非常重要的。如果你做的网站全部是用文字,而没有一些图标去衬托的话,总感觉会缺少一些东西,那就是美感。
- Font Awesome是什么?
Font Awesome是一套图标字体,主要目的是和Bootstrap搭配使用,但是我们也是可以直接使用的。是一款基于css框架的网页字体图标库,【完全免费】。
ps:对于【完全免费】这一词,博客园园友 rvalue对我的进行了指点(非常感谢这位大神):
【Font Awesome字体根据SIL Open Font License进行许可;
Font Awesome的CSS/LESS/SASS等代码是根据MIT License许可的;
Font Awesome的文档根据CC BY 3.0许可协议许可. 】
使用优点:
- 无需依赖js库;
- 可以无限放大缩小;
- css自由控制大小,颜色等;
- 分辨率高;
- 兼容性好;
- 等等等等;
引用方法:
- 直接引用MaxCDN提供的:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- 下载后直接引用css:
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
- 第三种比较适合大神,这里就不说了。
使用方法:
- 只需要使用css前缀fa,再加上图标名称,比如:<a class='fa fa-search'>搜索</a>
- 放大图标:fa-2x(两倍大小),fa-3x,fa-4x,fa-5x;这样的话图标可以成倍放大,也可以直接font-size写自己需要的大小;
- 图标对齐:fa-fw 这样的话用到的图标宽度就会对齐了。(这个在竖形列表中很有用)
- 图标旋转:fa-spin fa-pulse ;最适用的就是刷新,加载等图标了。这样的话不用加gif动画了,很实用;
- 太多了,大家可以直接看官网,非常详细;
详细代码
- 上图左边的html代码如下,很轻松的就实现了,而且hover,click颜色都可以直接设置,不像以前这样的话会用到三张图片去替换,麻烦:
<div class="left">
<ul class="cleanfloat">
<li><span class="fa fa-home fa-fw"></span>首页</li>
<li class="on1"><span class="fa fa-home fa-fw"></span>首页</li>
<li><span class="fa fa-user-circle fa-fw"></span>客户</li>
<li><span class="fa fa-user-circle fa-fw"></span>客户</li>
<li class="on2"><span class="fa fa-bell fa-fw"></span>消息</li>
<li><span class="fa fa-bell fa-fw"></span>消息</li>
<li><span class="fa fa-bar-chart fa-fw"></span>报表</li>
<li><span class="fa fa-bar-chart fa-fw"></span>报表</li>
<li><span class="fa fa-pencil fa-fw"></span>应用</li>
<li><span class="fa fa-pencil fa-fw"></span>应用</li>
<li><span class="fa fa-cog fa-fw"></span>设置</li>
<li><span class="fa fa-cog fa-fw"></span>设置</li>
</ul>
</div>
- 上图中图片右上方的实现html代码如下:
<ul class="cleanfloat">
<li class="onC1"><a class="fa fa-search"></a>查询</li>
<li><a class="fa fa-refresh fa-spin"></a>刷新</li>
<li><a class="fa fa-share-alt"></a>分享</li>
<li><a class="fa fa-sign-out"></a>注销</li>
<li><a class="fa fa-power-off"></a>退出</li>
</ul>
再写就感觉有点啰嗦了。个人觉得这个用起来简单易上手,真的是很实用的!
三、总结
今天只是简单的给小白了解一下这个知识,个人觉得是很实用的,至少不用总是难为ui妹子设计小图标了。而且大小和颜色也可以自己控制。好像我这废话有点多。希望大家对我进行批评与指教!
本文只是告诉大家一些小的图标可以不用ui妹子去设计了,但是一些色调呀排版呀,程序猿跟ui妹子比起来,还是会差距大的不要不要的。
ps:其实为了总结这个,花了一天的时间,画页面,调样式。但是真到写的时候,竟然写的东西太少,也不知道写些什么,唉,真的是有点挫败感!
ps:上次写的一篇关于css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星) 被很多人直接搬走了,也没有注明出处,这有点不厚道了,关键是有的地方显示的发表时间竟然还在我这个时间之前,真的是无语了!我很欢迎大家转载,但是请保留申明和出处,尊重每个人的劳动成果!
最新文章
- Senparc.Weixin.MP SDK 微信公众平台开发教程(七):解决用户上下文(Session)问题
- Leetcode 98. Validate Binary Search Tree
- 10年程序员谈.Net程序员的职业规划(图/文) (转载)
- java利用zxing编码解码一维码与二维码
- javascript设计模式--状态模式(State)
- stdint.h 文件 int8_t uint8_t int16_t uint16_t
- VC一些经验系列:《平均绘画矩形图,双击全屏》
- paramiko模块实现堡垒机
- LINQ高级编程 笔记
- [Python笔记]第三篇:深浅拷贝、函数
- 局域网指定 IP 地址后无法上网的问题
- Java多线程Lock
- [USACO17JAN]Promotion Counting晋升者计数
- python常见的函数和类方法
- PHP中判断变量是否存在的方式
- 动态渲染页面爬取(Python 网络爬虫) ---Selenium的使用
- lnmp架构搭建实例
- vue子父组件的通信
- ueditor 正在读取目录
- CSOM中如何取到managed metadata类型字段的类型信息
热门文章
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
- NPOI 表头、页眉页脚重复设置
- linux虚拟机下解压文件
- 代码规范--捡拾(SQL语句)
- JavaWeb 后端 <;三>; 之 Response Request 学习笔记
- C#语法糖演进-C#语言和.NET Framework平台介绍
- java系统高并发解决方案(转载收藏)
- 说说BroadcastReceiver和ContentProvider
- 第一章:eclipse 中修改字体大小和编码格式
- 一大波jQuery事件即将来袭!