怎么着不难方便的用字体代替页面中常见常用的小图标小按钮(上)

一、前言

  • 明天要读书的情节:明日第叁是有点统计一下,页面中哪些用字体代替图片,省事,省时,方便,实用!
  • 小苏啰嗦:人都是有惰性的。真的。刚先导大家有贰个经验充分的图腾,加上大家提到又特别好,以至于每一趟小编都是等着他把设计图给本人,小编才开端码html。碰着图片的地点,会切的就融洽切了,不会的,就间接让美工切图给本人。成了三个不动脑子的码农!今后,美工换人了,新的图画太忙了。加上可能对我们前端交互素不相识,以后原型图出来,作者能不找美工就不找美工。本人入手!呵呵。

二、正文

  • 一旦下边两张图(右击图片-在新窗口打开图片,可以见到大图,更清楚),除了文字,上边的图片你平常是咋做的?如若也是用图片代替的,那么明天您就会学到新技巧;借使你不是用图形,可以吗,那篇小说对您来说out了。你可以不要往下看呀。哈哈!

图片 1

图片 2

地点图片中用到的就是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. 平昔引用马克斯CDN提供的:<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颜色都得以一贯设置,不像以前这样的话会用到三张图纸去替换,麻烦:

    1

    2

      3

    • 首页
    • 4

    • 首页
    • 5

    • 客户
    • 6

    • 客户
    • 7

    • 消息
    • 8

    • 消息
    • 9

    • 报表
    • 10

    • 报表
    • 11

    • 应用
    • 12

    • 应用
    • 13

    • 设置
    • 14

    • 设置
    • 15

    16

  • 上图中图纸右上方的贯彻html代码如下:

    1

      2

    • 查询
    • 3

    • 刷新
    • 4

    • 分享
    • 5

    • 注销
    • 6

    • 退出
    • 7

再写就感觉有点啰嗦了。个人认为这些用起来大致易上手,真的是很实用的!

三、总结

前天只是大致的给小白了然一下以此知识,个人认为是很实用的,至少不要总是难为ui妹子设计小图标了。而且大小和颜料也足以友善决定。好像笔者那废话有点多。希望我们对自小编进行批评与指教!

正文只是告诉大家某些小的图标可以不用ui妹子去设计了,但是有的颜色呀排版呀,程序猿跟ui妹子比起来,依旧会距离大的决不不要的。

ps:其实为了总括这些,花了一天的光阴,画页面,调样式。可是真到写的时候,竟然写的东西太少,也不亮堂写些什么,唉,真的是有点挫败感!

ps:上次写的一篇有关css简单贯彻五角星评分、点赞收藏、浮现评分(半颗星、33.33%颗星) 被广大人直接搬走了,也绝非表明出处,那有点不厚道了,关键是一对地点显得的发表时间竟是还在我这一个时间从前,真的是无语了!作者很欢迎大家转发,可是请保留注解和出处,尊重每种人的劳动成果!

 

相关文章