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

一、前言

  • 后天要读书的剧情:明天珍视是不怎么计算一下,页面中哪些用字体代替图片,省事,省时,方便,实用!
  • 小苏啰嗦:人都以有惰性的。真的。刚初始我们有一个经验丰硕的图腾,加上大家关系又充裕好,以至于每一趟作者都以等着他把规划图给自家,小编才起先码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简单贯彻五角星评分、点赞收藏、体现评分(半颗星、三分一颗星) 被过五个人一贯搬走了,也尚未注解出处,那有点不厚道了,关键是部分地方显得的宣布时间竟是还在自家这些时间从前,真的是无语了!笔者很欢迎大家转发,然而请保留评释和出处,尊重各样人的劳动成果!

 

相关文章