整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们经常需要在设计Web页面或者做H5APP的时候经常需要使用图标和文字结合的方式增强页面元素的前端效果，比如登录页面中的用户名和密码经常就是图标和文字结合的方式展现的。
一、文字前面加小图标的三种方法
我这里讲三种方法，经过测试，我主要推荐最后一种方法，因为显示效果最好，同时也实现图标和文字完美对齐。
1、增加一个img标签指向图标路径
代码截图：
代码内容：
<!--css代码-->
.mui-input-row{
line-height: 40px;
height: 40px;
}
<!--元素-->
<div class="mui-input-row">
<img src="../images/datetime.png" style="width:20px;height:20px">
<span>日期</span>
</div>
2、增加一个span标签设置背景图片样式
代码截图：
代码内容：
<!--css代码-->
.mui-input-row{
line-height: 40px;
height: 40px;
}
.img{
background: url(../images/datetime.png) no-repeat center / 100%;
width:20px;
height:20px;
display:inline-block;
margin-left:7px;
}
<!--元素-->
<div class="mui-input-row">
<span class='img'></span>
<span>日期</span>
</div>
3、为文字标签设置背景图片(推荐)
代码截图：
代码内容：
<!--css代码-->
.mui-input-row{
line-height: 40px;
height: 40px;
}
.img{
background: url(../images/datetime.png) no-repeat left / 20px;
display: inline-block;
margin-left:15px;
width:60px;
text-align: right;
}
<!--元素-->
<div class="mui-input-row">
<span class='img'>日期</span>
</div>
三种方法的效果展示：
上图三个日期图标分别是按照以上三种方法实现的，通过效果对比可以明显看出最后一种方法对齐情况最好，所以推荐大家都用这种方法，而且代码量少，也不需要多余的标签，非常方便，所以大家快去尝试吧~
单、漂亮的开源图标库，目前共计 280+ 个图标，支持在线搜索查找图标
官方网站：https://feathericons.com/
github地址
https://github.com/featheric
安装 npm
npm install feather-icons --save<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>要在页面上使用图标,请添加data-feather 带有元素图标名称的属性:
<i data-feather="circle"></i>
使用方法:
web开发中，我们经常要用到一些小图标（加减勾叉等）。通常做法就两种：
1、直接使用图片；
2、使用css/svg直接在浏览器中绘制图标；
方案1
由于图标图片比较多，而且体积很小，为了减少请求，我们需要用雪碧图将图标拼凑在同一张图片里面，修改维护十分麻烦！
现在比较好的方案是使用webpack引入图片，小图直接转换成base64插入css中。直接使用图片比较简单，这也是目前比较主流的做法。
● 方案2
相比方案1，明显可以减小资源的体积，只需要几条css/svg命令就可以绘制出精美的图标，而且不受图片尺寸限制，可大可小非常灵活。
初看方案2的一堆代码可能会觉得非常难，但其实很多简单的图标都是非常容易实现的。
接下来就是同学们最期待的小智手把手教学时间啦。
01 暂停按钮
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>02 加号按钮
.box{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -35px;
cursor: pointer;
}
</style>
<body>
<div class="box"></div>
</body>03 关闭按钮
<style>
.box{
width: 30px;
height: 0;
color: black;
box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
}
</style>
<body>
<div class="box"></div>
</body>04 菜单按钮
用阴影实现
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>用背景裁剪实现
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>用渐变函数实现
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
}
</style>
<body>
<div class="box"></div>
</body>05 文章图标
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
outline: 18px solid #ffffff;
outline-offset: -25px;
transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>06 单选按钮
.box{
width:0;
color: #000;
border: 3px solid black;
outline: 6px dotted ;
outline-offset: 6px;
}
.box{
width:0;
padding: 3px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}
.box{
height: 6px;
width: 6px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}07 靶子图标
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}08 田字图标
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}09 下载箭头
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}10 下载箭头（带横线）
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}11 禁用图标
*请认真填写需求信息，我们会在24小时内与您取得联系。
