css图标库_css常用的矢量图标大全

时间: 2018-11-12阅读: 12582标签: 图标

以前网页上显示图标都是用切成小图片,然后根据不同场景作多个小图,通过js来控制显示效果。 字图图标,顾名思义,就像使用通常的字体,可以设置字体颜色,大小等,不用在搞多张小图片,非常灵活。其优点:

  • 轻松的定义图标的颜色,大小,阴影,和任何与css相关的特性。
  • 更快的载入速度、样式更容易定义。
  • 使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中。


Iconfont

阿里巴巴矢量图标库,Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。 

网站: http://www.iconfont.cn/


Font Awesome

Font Awesome为您提供可缩放的矢量图标,您可以使用css所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。其特点:

一个字库,675个图标
无需依赖JavaScript
无限缩放
如言语一般自由
CSS控制
高分屏完美呈现
完美兼容其它框架
可用于桌面系统
可适配于屏幕阅读器

网站http://fontawesome.dashgame.com/

Github: https://github.com/FortAwesome/Font-Awesome/


Cikonss

Cikonss是利用纯CSS技术构建的响应式、跨浏览器的icon,兼容IE8+。这意味着必须使用CSS2,因此,可以绘制的形状或图形就收到了限制。

某些icon必须有 border-radius 属性,这主要是为了在支持此属性的浏览器上更好的绘制icon,而且不会影响到不支持此属性的浏览器。

网站:http://www.bootcss.com/p/cikonss/index.html


Glyph Icons

Glyphicons Halflings需要商业许可,但是可以通过基于项目的Bootstrap来免费使用这些图标,Bootstrap捆绑了200多个字体图标。  

官网: http://glyphicons.com/


Simple Line Icons

一套线条非常优美的图标。

官网: https://thesabbir.github.io/simple-line-icons/

Github: https://github.com/thesabbir/simple-line-icons


Ionicons

一套线条非常优美的图标,今天为止大约有750多个字体图标,图标多,有标准,iOS,Android,社交图标,图标非常精美。

官网: http://ionicons.com/

Github: https://github.com/driftyco/ionicons


Themify

Themify图标是用于网页设计和应用一套完整的图标,包括320以上像素完美,手工制作的图标,画的灵感来自苹果iOS7公开,100%免费!

官网: http://themify.me/themify-icons


Material Design Iconic Font

有提醒,视频,联系,内容,编辑器,硬件,地图等多种分类图标

官网: http://zavoloklom.github.io/material-design-iconic-font/index.html

Github: https://github.com/zavoloklom/material-design-iconic-font


Weather Icons

涵盖了与天气相关字体图标

官网: http://erikflowers.github.io/weather-icons/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1327

关闭

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

Web 前端矢量小图标的使用方法

在写前端页面时,我们经常会用到一些小图标之类的图片,如果使用图片的话代码写起来比较麻烦,最近发现一个方便实用的方法,直接引用就可以了。

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

设置网页浏览器标签小图标

在线生成ICO图标制作一个16*16 的.icon文件,文件名必须要favicon.ico,然后放在服务器根目录下面,一般浏览器会自动默认在跟目录下面查找。

在Vue.JS中使用图标组件

本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读。此文不包含字体图标和SVG sprite。仅在此讨论允许用户按需导入的图标系统

ReactNative中如何使用自定义的Iconfont图标

在App包的构成中图片资源是比较占大小的,所以我们可以利用Iconfont来替代原来的png或者jpg单色图标,iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。

阿里巴巴iconfont svg图标不能更改颜色的解决方法

svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。修改的话,需要在编译器里面打开 svg 然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!