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

关注web前端开发的个人技术博客,分享前端经验和技巧
码云笔记 » css3 100多个白色线性图标样式代码

发表评论

提供最优质的资源集合

立即查看 了解详情