Register

  • 点击获取
  •   

已有账号直接登录    

公告:
分享CSS常用图标库
首页 > IT计算机 > Web程序设计    作者:RainFly   2016年8月13日 5:31 星期六   热度:4259°   字号:   评论:3    
时间:2016-8-13 5:31   热度:4259°  评论:3 条 

    图标在web前端设计和app开发中作为可视化一个重要元素,部分网站为了使图片性质标志很难自适应,而且重复项目重复量多,现在提供两个常用的纯CSS图标库,只需要引用一样样式文本,就可以在任意轻松使用

1.Font Awesome一个支持可缩放的矢量图标

  官网详情:http://fontawesome.dashgame.com/

  该字库含有585个图标基本上都能满足需要。

  head 部位加上应用css样式路径,

<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">


   Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span>

所以在需要插入的图标的地方加上 

<i class="fa fa-camera-retro"></i> fa-camera-retro

  使用i标签很简洁明了。由于是文本类型的图标,所以修改了容器文字样式图标也会随之变化的。所以修改图标样式你可以直接用容器来修改,也可以使用官网提供的一些class来,调整大小颜色阴影。需要可以去看看


2.icono

0402555BW.jpg

官网详情:http://saeedalipoor.github.io/icono/ 

同上面的图标使用方法一样,仅仅只需要一个标签就可以实现纯css3的图标

使用方法:

 head嵌入

    

<link rel="stylesheet" href="icono.min.css">


需要使用的地方直接插入标签即可

<i class="icono-mail"></i>

<div class="icono-mail"></div>

<span class="icono-mail"></span>

<whatever class="icono-mail"></whatever>




 您阅读这篇文章共花了:  
捐赠支持:如果觉得这篇文章对您有帮助,请"扫一扫"鼓励作者!
二维码加载中...
本文作者:RainFly      文章标题: 分享CSS常用图标库
本文地址:http://www.rainfly.cn/?post=235
版权声明:若无注明,本文皆为“雨夜轩”原创,转载请保留文章出处。

已有3条吐槽

宁国房产网  Google Chrome 55.0.2883.87 Google Chrome 55.0.2883.87 Windows 7 Windows 7  安徽省合肥市 电信 2017-11-15 16:17 地板
楼主您好,交个朋友,加我的QQ,文章很好
宁国房产网  Google Chrome 55.0.2883.87 Google Chrome 55.0.2883.87 Windows 7 Windows 7  安徽省池州市 电信 2017-11-14 22:13 板凳
真的可以用!
风花雪月  Firefox 42.0 Firefox 42.0 Linux Linux  山东省 电信 2016-08-15 06:49 沙发
thank you for sharing!

QQ游客评论

返回顶部    首页    捐赠支持    手气不错    友情链接    关于我们    站长工具    站长介绍    手机版本    后台登陆   
版权所有:雨夜轩    站长:RainFly    特别鸣谢   文章归档   皖ICP备15003600号-1   百度统计
Copyright©2015雨夜轩 Powered by emlog强力驱动 七牛CDN全球加速 360站长联盟安全认证 中国博客联盟荣誉成员 可信赖网站 谷歌地图   百度地图   
页面加载耗时:0.046秒 数据库查询次数:20次
00:00 / 00:00
随机播放
    背景设置