在 input 上添加图标字体时无法添加的问题
效果:一个搜索框。如图:
实施过程:一开始,将搜索框分为2部分,用2个 input ,一个 search ,一个 button ,然后给 type="button" 的input 添加放大镜的图标字体 。然而在添加图标字体到 input 上时,发现怎样都无法显示出来。如下图:
秉着“事出反常,必有妖”的心态,悄咪咪的将 input 换成了 button 元素,于是就成了。稍微有点懵 (o´・ェ・`o)
至此,问题解决了。皆大欢喜! []~( ̄▽ ̄)~*
虽然简单,但也贴上代码。哈哈 ~~~
html:
<button type="button" class="search-btn"></button>
css:
.search-box .search-btn{
float: left;
width: 50px;
height: 40px;
background: #00a4ff;
font-family: "icomoon";
font-size: 20px;
color: #fff;
border:;
} .search-box .search-btn::before{
content:"\e987";
}
注:上面所使用的 icomoon 字体为 icomoon 网站下载,可自行下载使用,IcoMoon App - Icon Font, SVG, PDF & PNG Generator
欢迎知道原理的小哥哥、小姐姐们在评论区告知。 O(∩_∩)O
在 input 上添加图标字体时无法添加的问题的更多相关文章
- CSS网页使用Font Awesome图标字体时,css定义 content 属性
原文地址: http://blog.csdn.net/laurel_y/article/details/70842157
- VisualStudio:添加现有项时使用添加为链接
这个特性很容易忘记使用(很多人可能还不知道),这里解释一下. 添加为链接是指:将指定的文件作为链接添加到项目中,这个文件在作用上和一般的文件没有区别,这样做的好处是可以多个项目共享一个文件,如:连接字 ...
- 使用IcoMoon生成图标字体
就我个人而言,往往要想找点什么ICON素材啊,往往都是酱婶滴,先去FontAwesome(在线图标字体库,但资源有限)里面巴拉巴拉,或者其他资源看看有没有合适的.如果没有就去求助我们大UI,笑笑给我来 ...
- iocfont 网页图标字体以及使用方法
在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移动设备.Retina屏幕效果展示.兼容IE6/7浏览器以及能任意将图标放大缩小等,这些都是 ...
- CENTOS 7 和 JDK 添加中文字体
写在前面的话 当运维总是遇到各种奇奇怪怪的问题,比如新的 JAVA 项目上线,login 界面有个验证码,结果部署后发现,要么显示的奇奇怪怪,要么压根不显示. 或者在使用一些开源的 JAVA 项目的时 ...
- html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)
1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 多文件上传,添加重复文件时无法触发onchange事件。
<input type="file" id="upload" @change="getFile($event)" multiple=& ...
- C#:隔离点击任务栏上的图标时的“最小化或者恢复”的效果
通常点击任务栏上的图标时,对应窗体实现“最小化或者恢复”的效果.但是在做最小化到托盘时,不希望点击任务栏图标时最小化到托盘,即希望拦截了这些效果(不允许:通过点击任务栏上的图标,实现“最小化或者恢复” ...
随机推荐
- mysql cmd 常用命令
环境变量配置配置好以后,打开cmd 连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 创建授权:grant selec ...
- Consider using the `--user` option or check the permissions.
安装pip install C:\Users\道路\Documents\EGDownloads\pip-1.0.tar.gz 报错:Consider using the `--user` option ...
- 一点点学习PS--实战五
本节实战的内容,新学习到的功能是:人物影子边缘.立体的心形 1.工具的使用: (1)滤镜--模糊--特殊模糊 (2)滤镜--滤镜库--艺术效果--水彩 (3)滤镜--滤镜库--纹理化 (4)自动形状工 ...
- Python学习笔记9——异常处理
处理异常 如果执行到程序中某处抛出了异常,程序就会被终止并退出.你可能会问,那有没有什么办法可以不终止程序,让其照样运行下去呢?答案当然是肯定的,这也就是我们所说的异常处理,通常使用 try 和 ex ...
- SDRAM中数据掩码的作用
DQM就是掩码控制位.在sdram中,每个DQM控制8bit Data在读操作的时候没什么大的影响,比如你读32位的sdram module, 但你只要其中低8bit的数据,没有关系,只要读出32bi ...
- linux安装Zookeeper及redis集群
亲测有效: 1.linux下安装zookeeper:https://www.cnblogs.com/zuolun2017/p/8186254.html 2.linux下安装redis集群:https: ...
- Netcat工具
一般Netcat有两个版本,一个版本是不提供反向连接的版本,一个是全功能版本.这两者的区别就是是否带-e参数,只有带-e参数的版本才支持反向连接. 参数说明 -c shell commands she ...
- Vue中父组件向子组件echarts传值问题
原文链接:https://blog.csdn.net/Uookic/article/details/80638883?utm_source=copy 问题:当父组件传值给子组件echarts时,发现子 ...
- JS高级---一个神奇的原型链
一个神奇的原型链 <script> var divObj=document.getElementById("dv"); console.dir(divObj); //d ...
- goland 2019.1.1破解
https://blog.csdn.net/hi_liuxiansheng/article/details/89078405