iconfont用在placeholder里

阿里巴巴矢量图标库使用方法链接：https://www.zhihu.com/question/25952487/answer/71917554
感谢作者大大的分享！！！

图标的制作和上传可以参照官网给出的文档：Page 1
图标的下载和使用官网上说的不是很清楚，简单介绍下：
1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”

2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。

3.在HTML中需要使用到图标时，使用iconfont类名。

<i class="iconfont"></i>

里面写上你想用的图标下面的Unicode：

4.然后你可以通过控制iconfont类的属性改变图标的样式，比如：

.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale; padding-left:20px
}

就可以在页面中引用和修改了。

这是在页面中如何使用矢量图标，但是我们要解决的问题是如何在input框中让矢量图标成为占位符，在这里我提供一个方法：

《input class="iconfont" type="search" value=""placeholder="该图标的Unicode码" name="keyword"》

将Unicode放到placeholder中。使用iconfont类，就可以啦

效果如下图所示：

iconfont用在placeholder里相关推荐

iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...
textarea 手机端无法换行_在某一些手机的安卓浏览器上textarea标签的placeholder不自动换行的解决方法...
最近在做移动端的web开发的时候,定义了一个textarea,并使用placeholder写的提示语.在一些手机上发现,placeholder的内容不会自动换行,而是超出了屏幕的显示区域,隐藏掉了,很 ...
iOS placeholder换行
最近被问到一个奇怪的问题.textarea 里设了placeholder,UI要求换行显示,于是奇怪的问题发生了,他不换行-怎么都不换行. <textarea name="" ...
怎么对阿里iconfont两个项目中的字体图标合并
1.把下载下来的2个文件夹都放入项目中 2.如要把iconfont2文件夹中的字体图标合并到iconfont文件夹中,则如下图,修改iconfon2文件夹下左侧该图标的五个文件名,同时修改这个文件夹中 ...
iconfont-阿里图标库的使用
目录前言一.在线链接二.下载至本地 1.处理下载的文件 2.使用 Font class 三. 上传图标至项目四.问题踩坑记 1.iconfont的图标使用的时候怎么调整大小? 2.iconfo ...
Vue项目iconfont新增svg图标
最近接手一个开发一半的Vue3的后台管理项目,由于样式需要,需要新增一些svg图标,项目使用的是iconfont接下来我会通过几个步骤在原来iconfont基础上去新增一些自己的图标: 一.iconf ...
手把手教你引入iconfont图标字体（方法一）
一 unicode 打开iconfont网站:iconfont-阿里巴巴矢量图标库挑选想要的图标,加入购物车: 全部挑选完后,点击购物车: 将购物车中的图标加入到项目中: 全部挑选完后,点击购物车: ...
字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground
目录一.字体族二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式四.iconfont 五.行高六.字体的简写属性七.文本的水平和垂直对齐八.其他的文本样式九. ...

iconfont用在placeholder里

iconfont用在placeholder里相关推荐

最新文章

热门文章