css3 100多个白色线性图标样式代码

css3 100多个白色线性图标样式代码

分享css3 100多个白色线性图标样式代码,总共100多个,每一个图标都是利用CSS3的相关特性来实现。在这些CSS3图标中,有部分是动态图标,这些带动画的图标同样也是利用CSS3的动画属性实现的。

小白补脑:

首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。

优点:

  1. 加载文件体积小
  2. 统一展示风格,使用方法
  3. 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
  4. 可以添加一些视觉效果如:阴影、旋转、透明度
  5. 兼容IE6
  6. 后期维护成本很低

缺点:

  1. 制作门槛有点高,需要借助专业的工具生成字库文件
  2. 需要服务器做些相应的配置来解决识别问题和跨域问题

使用方法:

首先,在head头部引入字体css文件

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

然后,在需要加入图标的地方通过对应的css类名调用

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

更多个性化定制,阿里巴巴Iconfont平台不但免费提供了1w多个常用的图标,然后通过相关工具可以指定出大家喜欢的个性图标感兴趣的可以看一下我之前的一篇关于icon字体图标的制作方式《如何将SVG文件转换成图标字体文件

下载方式:百度网盘 提取码:jdrj

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css3 100多个白色线性图标样式代码

发表评论