写在前面

产品要求放大镜和文字放在一起。用定位,位置不准确,就会导致手机上错位,丑的一批。

进入正题 如何在input的 placeholder 中使用图标呢?

以阿里巴巴的矢量图标库为例, 现在有三种引入方式  Unicode 、 Font class 、 Symbol(为了多色)。

我们现在引入方式是Font class 、 Symbol两种同时使用,Symbol仅仅是为了多色图标。又啰嗦了,进入正题进入正题。

注意要加图标类名 比如 iconfont

1、Unicode方式

1、不要直接赋值 例如
<input type="text" class="iconfont search" placeholder=''>

2、通过vue的bind 注意把&#x改成 \u

<input type="text" class="iconfont search" :placeholder='"\ue65a"'>

2、Font class方式

同上不过是从伪类的content里面拿到  例如 \e7bc 变成 \ue7bc 多一个u,同样是bind

<input type="text" class="iconfont search" :placeholder='"\ue7bc"'>

写在最后

产品真是操蛋

在 input 的 placeholder中 使用iconfont的更多相关文章

  1. input修改placeholder中颜色和字体大小

    input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-si ...

  2. 鼠标点击input时,placeholder中的提示信息消失

    html代码: <input type="text" placeholder="多个关键词空格隔开"> 鼠标点击input时,placeholder ...

  3. 四、Input框改placeholder中字体的颜色

    Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }

  4. vue之placeholder中引用字体图标

    先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图 效果如图 在网上get到了解决方法: 在VUE组件中,给placeholder添加图标,需要注意以下几点: 1.不要给 ...

  5. css系列:input的placeholder在safari下设置行高失效

    在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI ...

  6. 在safari下input的placeholder设置行高失效

    在项目中遇到input的placeholder在safari下设置行高失效的问题,亲测 input{ width:250px; height:30px; line-height:30px; font- ...

  7. 关于placeholder中 文字添加换行 用转义字符&#13;&#10;代替<br>

    今天遇到一个问题 UI给的效果图中 文本域的提示文字 是两行显示, 于是就想到placeholder中能否解析html标签, 尝试后发现并无卵用, 经过调查后发现 可以用转义字符代替<br> ...

  8. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  9. 设置input的placeholder样式

    自定义input默认placeholder样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 inpu ...

随机推荐

  1. 72.Properties(配置文件)

    Properties(配置文件):主要用于存储配置文件到硬盘上面和读取配置文件 public class Properties extends Hashtable<Object,Object&g ...

  2. vue中使用axios进行http通信

    1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...

  3. go new

    go new 尽管没有构造函数,go有一个内置的函数new,可以用来分配一个类型需要的内存.new(X)和&X{}是等效的: goku := new(Saiyan) // 等效 goku := ...

  4. YII 中加入短信接口的函数

    public function smsto($telphone,$message) { //短信接口用户名 $uid,如果没有或不能发送请与客服联系 $uid = 'zyd'; //短信接口密码 $p ...

  5. 冲刺$\mathfrak{CSP-S}$集训模拟赛总结

    开坑.手懒并不想继续一场考试一篇文. 既没必要也没时间侧边栏的最新随笔题解反思相间也丑 而且最近越来越懒了竟然都不写题解了……开坑也是为了督促自己写题解. 并不想长篇大论.简要题解也得写啊QAQ. 目 ...

  6. 使用Nodejs 的http-proxy 模块做代理服务器的尝试

    参考 : https://blog.csdn.net/zhihuoqian9683/article/details/78944482  (亲测可行) http://www.mizuiren.com/4 ...

  7. 卿烨科技 Fireball

    9人开发病毒感染超2亿电脑!Fireball病毒境外做案被举报   原标题:名校毕业生研发病毒年获利8000万 2.5亿台电脑感染 海淀网友协助民警追踪跨境黑客 高材生开公司研发病毒 一年获利8000 ...

  8. 关于ACL访问控制的一些问题:AntiACL

    @echo off title AntiACL Made By gwsbhqt color 0a reg query "HKU\S-1-5-19" >nul 2>nul ...

  9. Codeforces 1172A Nauuo and Cards

    题目链接:http://codeforces.com/problemset/problem/1172/A 题意:一共有2*n张牌,n张0,n张1到n.现在随机的n张(有0有数字)在手上,另n张再牌堆中 ...

  10. response和ServletContext和乱码问题

    服务器端以/开始就代表当前项目名客户端必须以 /项目名/资源 才能定位到资源 软件与软件之间,以字符为标准传递,传递字节,接收端自己按原来的编码集编码之后再按照自己的编码集解码编码(如果没有对应字符, ...