icon php图标集合,iconfont字体图标和各种css小图标的详解
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
1. iconfont字体图标
我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:
这些小图形我们可以用图片代替,通常我们是把这些图形切图之后做成精灵图(又叫雪碧图);
精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片;
精灵图的优点:减少服务器的请求次数,降低服务器压力;
sprites是一款很好的精灵图制作工具;
当然还有其他的方法可以制作这些小的图形,比如上图中,天猫使用的字体图标iconfont;
字体图标,顾名思义,就是一种字体,和字体一样,是矢量的,我们也叫矢量图标,任意放大缩小,都不会失真;
网络中有很多字体图标库,这里我介绍一下iconfont的使用:
官网:http://www.iconfont.cn/
我就不说怎么制作了,我们直接使用吧(呵呵,其实我画的图太丑);
原本准备写一下使用方法的,但是iconfont好像又升级了,加入了symbol写法,支持多色图标了(这涉及到SVG的知识),官网的帮助文档的GIF图也很好的解释了怎么应用,我就写一下我第一次用的时候遇到过的坑吧:
"下载代码"按钮,希望你能直接找到。嗯,我找了好一会,默认让我去设置颜色和大小去了,这个是去弄素材的,前端只要代码就可以了,点击撤销,然后...;
不知道是我电脑问题(1366*768)还是怎么回事?这个"下载代码"按钮被我的windows底部工具栏挡住了一半,嗯,这个...
当我们把字体图标下载下来之后,它就是一个文件了,我们是在css里定义字体类型的时候,别忘了把路径设置正确;
如果我们使用的是iconfont的在线项目(没有下载文件),当项目成员更新了图标,如果我们也想用新的图标,就也得更新"在线链接";
字体不支持多色,如果我们使用下载文件的方式,那就只能用字体颜色设置单色了。想使用多色图标,就得用symbol引用在线链接的方式;symbol引用的是js文件,font-class引用的css文件,两种方式的写法也是不一样的;
2. css小图标
大师们用css制作出了各种纯css图形,我这里就只列举几种我用的比较多的;
三角形,请看这篇, border三角形阴影和多重边框的整理转述 ;
菜单(三道杠),用border上边框双线和下边框实线,也可以反着来:
代码如下:
*{
padding: 0;
margin: 0;
}
.menu{
margin: 100px;
width: 55px;
height: 10px;
border-top: 30px double #f00;
border-bottom: 10px solid #f00;
/*用border上边框双线和下边框实线,也可以反着来*/
}
内凹角,大师的方法,点击这里,用css3属性径向渐变radial-gradient做:
背景图径向渐变可以设置:圆心位置,渐变的大小,渐变的形状,圆心处的颜色 宽度, ... ,结尾处的颜色宽度;
代码如下:
*{padding: 0;margin: 0;}
a{text-decoration: none;cursor: pointer;}
li{list-style: none;}
/*清除浮动*/
.clearfix:before, /*:before处理margin上下重叠*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.test{
margin: 100px 0 0 100px ;
}
.list{
margin-left: -20px;
}
.content{
width: 320px;
background: #7fd6f1;
min-height: 200px;
}
.item .active{
background: #7fd6f1;
color: #333;
}
.item{
float: left;
margin-left: 30px;
}
.item a{
display: block;
background: #ce4be2;
width: 80px;
height: 35px;
text-align: center;
line-height: 35px;
color: #fff;
border-radius: 10px 10px 0 0;
position: relative;
}
.item a:after{
content: "";
display: block;
position: absolute;
right: -9px;
/*不知大家是否发现,在边缘处其实是有1px的变化的,弧度到最后不是很自然,这里我们其实可以把位置往里1px*/
bottom: 0;
width: 10px;
height: 10px;
background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
/*背景图径向渐变可以设置:圆心位置,渐变的大小,渐变的形状,圆心处的颜色 宽度, ... ,结尾处的颜色宽度*/
/*圆心位置默认为center,我们这里设置圆心为元素左顶点和右顶点*/
/*渐变的大小默认为farthest-corder ,我们这里设置的farthest-side*/
/*渐变的形状默认为ellipse(椭圆),我们这里得设置成circle(圆形),但是宽高一样的椭圆不就是圆形么,so...*/
/*颜色和宽度的设置,我们在离元素宽度还有1px的时候变化,所以这里是10-1=9px;*/
}
.item a:before{
content: "";
display: block;
position: absolute;
left: -9px;
bottom: 0;
width: 10px;
height: 10px;
background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
}
.item .active:after{
background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
}
.item .active:before{
background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
}
新闻
娱乐
体育
还有很多css制作的经典图形,以后再整理吧;
其实,css制作的图标和图片代替的图片都很棒,根据需求吧。我更喜欢字体图标和图片的方式,效率更高,简单。
更多iconfont字体图标和各种css小图标的详解相关文章请关注PHP中文网!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
icon php图标集合,iconfont字体图标和各种css小图标的详解相关推荐
- 在线使用iconfont字体图标
使用阿里巴巴矢量图标库 用前准备 在线使用案例 三种使用方式介绍 vue项目(本地)使用iconfont字体图标 vue中手动封装iconfont组件(三种引用方式的封装) 使用准备 进入 阿里巴巴矢 ...
- uniapp使用iconfont字体图标
本文介绍两种方案:一.使用iconfont字体图标 二.使用icon图片 情景1:使用灰色的字体图标 方案一:使用iconfont字体图标 步骤1:下载iconfont 步骤2:解压后只需要将ifon ...
- 超全超靠谱的 iconfont 字体图标库维护与使用
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量 ...
- IconFont字体图标的下载与使用
如何在Iconfont下载字体图标 如何在IconFont-阿里巴巴矢量图标库下载字体图标-字体图标如何使用 一.IconFont的下载 1.首先打开官方网址 2.登录相关账号 3.添加需要的图标入库 ...
- C#使用IconFont字体图标的动态加载(&#xe格式转换)
IconFont 矢量字体图标由于文件小,资源多,可任意放大缩小不失真,方便着色等特点,在网页.Winform.WPF中被广泛使得.网页上介绍使用的文件很多,但动态加载并不多,本文将重点介绍利用C#语 ...
- 在HTML种引用阿里巴巴iconfont字体图标
概述 什么是阿里巴巴iconfont字体图标呢? iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制. 以前要引用各种图标需要使用的是图标图 ...
- 【Vue-Element】矢量字体库iconfont字体图标库使用
矢量字体库iconfont字体图标库使用 1.注册并登录 2.图标管理 >> 我的项目 >> 新建项目 3.新建完成后,搜索我们想要的图标,然后添加到购物车 4.添加完成后,购 ...
- iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法 一.打开阿里巴巴矢量图官网 阿里巴巴矢量图官网 界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
- iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
- 使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
最新文章
- 打造专属BGM,​Python 深度学习教你
- 运用家居收纳储物空间 小空间变出大身材
- Js让静态人物动起来Demo演示
- oracle中lock和latch的用途
- python的rsa公钥解密方法
- js 字符串减去字符串_js关于字符串、条件语句和自加和自减
- Mysql数据库,项目需求需要数据还原的数据表结构构思方案
- BDD怎样帮助你解决沟通问题并增进协作
- .net core 调用c dll_C++ 调用C封装DLL库的两种方式
- 通过用户登陆消息类,来学习面向对象的实体统一接口和验证统一接口
- 判断链表是否存在环 Linked List Cycle
- 自己写的一个简单的php快速开发框架(JPrass)
- 网络虚拟化-云计算-虚拟网络基础架构-软件定义网络(SDN)-控制器
- 99%用户不知道 搜索引擎这样用才有效率
- SwiftUI Swift 内功之如何在 Swift 中进行自动三角函数计算
- php暴力引流代码,利用霸屏暴力引流,免费分享霸屏代码
- 大数据处理技术的总结与分析
- CMD里如何用DiskPart命令删除分区
- fluent python 2nd edition_fluent python读书笔记2.2节
- Opencv笔记(十七)——轮廓性质
热门文章
- CentOS后门入侵检测工具
- 无线测温产品在轧钢厂项目中的应用
- 水苔可以种什么植物? 湖南水苔农业开发有限公司
- UGUI长按按钮的实现(技能蓄力使用)
- 安装odoo小程序商城模块报错 KeyError: u'oejia_weshop'
- 计算机原理作文,海口经济技术学院微型计算机原理作业第三章 习题与思考题:自述作文...
- 中国大学慕课python答案第七章_中国大学MOOC慕课用Python玩转数据章节测试答案...
- STM32F103访问W25Q64
- 《30天自制操作系统》学习笔记--第11天
- 创业者两大特征:喜欢折腾与坚持不懈