效果:一个搜索框。如图:

实施过程:一开始,将搜索框分为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 上添加图标字体时无法添加的问题的更多相关文章

  1. CSS网页使用Font Awesome图标字体时,css定义 content 属性

    原文地址: http://blog.csdn.net/laurel_y/article/details/70842157

  2. VisualStudio:添加现有项时使用添加为链接

    这个特性很容易忘记使用(很多人可能还不知道),这里解释一下. 添加为链接是指:将指定的文件作为链接添加到项目中,这个文件在作用上和一般的文件没有区别,这样做的好处是可以多个项目共享一个文件,如:连接字 ...

  3. 使用IcoMoon生成图标字体

    就我个人而言,往往要想找点什么ICON素材啊,往往都是酱婶滴,先去FontAwesome(在线图标字体库,但资源有限)里面巴拉巴拉,或者其他资源看看有没有合适的.如果没有就去求助我们大UI,笑笑给我来 ...

  4. iocfont 网页图标字体以及使用方法

    在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移动设备.Retina屏幕效果展示.兼容IE6/7浏览器以及能任意将图标放大缩小等,这些都是 ...

  5. CENTOS 7 和 JDK 添加中文字体

    写在前面的话 当运维总是遇到各种奇奇怪怪的问题,比如新的 JAVA 项目上线,login 界面有个验证码,结果部署后发现,要么显示的奇奇怪怪,要么压根不显示. 或者在使用一些开源的 JAVA 项目的时 ...

  6. html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. 多文件上传,添加重复文件时无法触发onchange事件。

    <input type="file" id="upload" @change="getFile($event)" multiple=& ...

  9. C#:隔离点击任务栏上的图标时的“最小化或者恢复”的效果

    通常点击任务栏上的图标时,对应窗体实现“最小化或者恢复”的效果.但是在做最小化到托盘时,不希望点击任务栏图标时最小化到托盘,即希望拦截了这些效果(不允许:通过点击任务栏上的图标,实现“最小化或者恢复” ...

随机推荐

  1. jQuery---jQuery对象与DOM对象的区别

    jQuery对象与DOM对象的区别 1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.2. jQuery对象:jquery对象就是使用jquery的方法获取页 ...

  2. mybatis(五):源码分析 - 参数映射流程

  3. 洛谷P1086 花生采摘

    https://www.luogu.org/problem/P1086 #include <bits/stdc++.h> using namespace std; typedef long ...

  4. 在sql server中如何检测一个字符串中是否包含另一个字符串

    select CHARINDEX('456','123456')   SQL语句使用CHARINDEX函数,来测试一个字符串中是否包含另一个字符串中的方法: 一.CHARINDEX函数介绍 1.函数功 ...

  5. Spring - Spring Boot - Thymeleaf - textual 模式

    概述 thymeleaf 的 text 模式简单使用 过程会比较啰嗦, 需要结论的同学, 可以直接到底部去寻找 背景 想尝试做一个简单的 模板工具 目的 自动生成一些简单的 重复文本 思路 尽量简单 ...

  6. 小匠_碣 第三周期打卡 Task06~Task08

    Task06:批量归一化和残差网络:凸优化:梯度下降 批量归一化和残差网络 对输入的标准化(浅层模型) 处理后的任意一个特征在数据集中所有样本上的均值为0.标准差为1. 标准化处理输入数据使各个特征的 ...

  7. python3安装虚拟环境(windows)

    1.pip install virtualenv   :安装命令 2.pip install virtualenvwrapper-win:安装命令 3.配置WORKON_HOME环境变量: 变量名:W ...

  8. centos7 walle2瓦力部署教程

    项目部署上线,如果是单服务器,那么有多种方式可以部署,比如直接ftp上传,或者直接git去拉取,人工操作也不会花费精力和时间,但是如果采用了集群模式,有多台服务器,那么依靠一台一台的去上传代码,就显得 ...

  9. nginx location匹配及rewrite规则

    location匹配规则 1. 实例 server{ location = \ { [配置A] } location / { [配置B] } location = /images/ { [配置C] } ...

  10. (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

    报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...