一、前言

  • 今天要学习的内容:今天主要是稍微总结一下,页面中如何用字体代替图片,省事,省时,方便,实用!
  • 小苏啰嗦:人都是有惰性的。真的。刚开始我们有一个经验丰富的美工,加上我们关系又非常好,以至于每次我都是等着她把设计图给我,我才开始码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许可协议许可. 】

使用优点:

  1. 无需依赖js库;
  2. 可以无限放大缩小;
  3. css自由控制大小,颜色等;
  4. 分辨率高;
  5. 兼容性好;
  6. 等等等等;

引用方法:

  1. 直接引用MaxCDN提供的:<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  2. 下载后直接引用css:<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
  3. 第三种比较适合大神,这里就不说了。

使用方法:

  1. 只需要使用css前缀fa,再加上图标名称,比如:<a class='fa fa-search'>搜索</a>
  2. 放大图标:fa-2x(两倍大小),fa-3x,fa-4x,fa-5x;这样的话图标可以成倍放大,也可以直接font-size写自己需要的大小;
  3. 图标对齐:fa-fw 这样的话用到的图标宽度就会对齐了。(这个在竖形列表中很有用)
  4. 图标旋转:fa-spin  fa-pulse ;最适用的就是刷新,加载等图标了。这样的话不用加gif动画了,很实用;
  5. 太多了,大家可以直接看官网,非常详细;

详细代码

  • 上图左边的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颗星) 被很多人直接搬走了,也没有注明出处,这有点不厚道了,关键是有的地方显示的发表时间竟然还在我这个时间之前,真的是无语了!我很欢迎大家转载,但是请保留申明和出处,尊重每个人的劳动成果!

放开那个UI 妹子,让我来(上)的更多相关文章

  1. 客户端热更新框架之UI热更框架设计(上)

    什么是热更新,为什么需要热更新?          热更新是目前各大手游等众多App常用的更新方式.简单来说就是在用户通过App Store下载App之后,打开App时遇到的即时更新.对于手游客户端来 ...

  2. Vaadin学习笔记——Page、UI和View在用法上的区别

    前言 在Vaadin技术框架中会出现三种不同的类,用于架构Web应用.它们分别是:Page.UI.View.本文将对这三者从使用角度进行比较,试图分析三者的异同.本文完全原创,我可不是在强调版权,我只 ...

  3. Swift UI控件详细介绍(上)

    UI控件 首先介绍一下AppDelegate.swift@UIApplicationMain 调用了OC中的UIApplicationMain函数:UIApplicationMain是iOS应用程序的 ...

  4. UI自动化页面需要选择上传文件

    UI自动化页面上传文件,百度查的时候说有4中方法,简便的方法是安装SendKeys,但是百度说这个只支持python2.7的 我的python版本是3.7的,目前还只碰到了非<input typ ...

  5. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  6. AJ学IOS(12)UI之UITableView学习(上)LOL英雄联盟练习

    AJ分享,必须精品 先看效果图 源代码 NYViewController的代码 #import "NYViewController.h" #import "NYHero. ...

  7. jQuery UI炫酷雨滴落在水面上的波纹涟漪特效

    raindrops是一款效果很炫酷的jQuery UI雨滴落在水面上的特效. 该特效模拟水滴从空中落入平静的水面上的效果. 通过參数能够设置水面波纹的大小,强度,波纹扩散的速度等等属性. 效果演示:h ...

  8. 利用WPF建立自己的3d gis软件(非axhost方式)(八)拖动一个UI到地球上

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(八)拖动一个UI到地球上 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew ...

  9. 免申请直接用上 IDEA 新 UI,只需要这三步配置

    早上给大家介绍了IDEA官方宣布正在开发一套全新的UI,但目前是预览版需要申请才能体验. 随后马上就有网友分享了,不需要申请直接就能激活体验的方法. 本期视频:https://www.bilibili ...

随机推荐

  1. php使用openssl加密数据

    <?php /** * Created by PhpStorm. * User: hanks * Date: 6/2/2017 * Time: 6:03 PM */ //使用php函数生成密钥对 ...

  2. Swift连接字符串和字符

    字符串和字符的值可以通过加法运算符 (+) 相加在一起并创建一个新的字符串值: let string1 = "hello" let string2 = " there&q ...

  3. a链接返回上一页

    <a href="javascript:void(0);" onclick="javascript:history.go(-1);" style='mar ...

  4. Vue.js 介绍入门

    Vue.js 的目标 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. ...

  5. 基于 HTML5 WebGL 的 3D 网络拓扑图

    在数据量很大的2D 场景下,要找到具体的模型比较困难,并且只能显示出模型的的某一部分,显示也不够直观,这种时候能快速搭建出 3D 场景就有很大需求了.但是搭建 3D 应用场景又依赖于通过 3ds Ma ...

  6. Windows PowerShell 默认颜色

    屏幕背景:1,36,86 屏幕文字:238,237,240 弹出文字:0,128,128 弹出窗口背景:255,255,255

  7. Visiual Studio CLR20r3

    问题事件名称: CLR20r3     解决方法:   步骤1:开始-->所有程序-->Microsoft Visual Studio 2012-->Visual Studio To ...

  8. RedHat安装中文支持和字体

    操作系统: Red Hat Enterprise Linux 6.3 x86 安装中文语言支持: yum install "@chinese support" 安装完中文支持后,可 ...

  9. Postmessage运用-往飞信添加信息

    1.定位窗口 fHwnd:=FindWindow(nil,'短信中心'); then begin showmessage('请先登录飞信2013短信中心'); exit; end; { applica ...

  10. PHP中的数据结构

    PHP7以上才能安装和使用数据结构,安装比较简单: 1. 运行命令 pecl install ds 2. 在php.ini中添加 extension=ds.so 3. 重启PHP或重载配置  Coll ...