9个非常实用的CSS图标库

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

  • 轻松的定义图标的颜色,大小,阴影,和任何与css相关的特性。

  • 更快的载入速度、样式更容易定义。

  • 使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中。

1、Iconfont

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

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

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

2、Font Awesome

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

其特点:

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

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

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

3、Cikonss

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

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

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

4、Glyph Icons

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

官网: http://glyphicons.com/

5、Simple Line Icons

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

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

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

6、Ionicons

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

官网: http://ionicons.com/

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

7、Themify

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

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

8、Material Design Iconic Font

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

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

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

9、Weather Icons

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

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

  • 11
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在CSS图标上施加动态效果,可以使用Vue中的事件监听和样式绑定。首先,我们需要在HTML中定义一个<span>元素并给它添加一个类名,如search。在CSS中,我们可以设置search类的样式,包括宽度、高度、边框、圆角等属性。我们还可以使用伪元素::after添加一个竖线效果。 接下来,我们可以使用Vue的v-bind指令将样式属性绑定到Vue实例的数据中。例如,我们可以将颜色、字体大小、鼠标指针样式等属性绑定到color、size和cursor这些数据属性上。 然后,我们需要在Vue实例中定义两个事件监听函数,分别是mouseover和mouseout。在mouseover事件中,我们可以通过改变数据属性的值来改变样式,以实现鼠标悬停时的动态效果。而在mouseout事件中,可以恢复样式的初始值,以实现鼠标离开时的效果。 通过这样的设置,当鼠标悬停在图标上时,样式属性将根据数据属性的值动态改变,从而实现CSS图标的动态效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue如何实现给文字或图标动态施加动画效果,或动态添加hover效果](https://blog.csdn.net/RoonaTh/article/details/110188018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [css hover 控制其他元素_CSS实用技巧:伪元素/伪类的妙用](https://blog.csdn.net/weixin_39926613/article/details/110216008)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值