112 条评论分享收藏感谢收起赞同 添加评论分享收藏感谢收起先说一下问题：在placeholder中想使用字体图标，结果渲染不正确，代码如图
在网上get到了解决方法：
在VUE组件中，给placeholder添加图标，需要注意以下几点：
1、不要给placeholder直接赋值，如下
&input type="text" class="iconfont search" placeholder=' 搜索音乐、视频、歌词、电台'&
应该使用：placeholder对此属性进行绑定赋值，如下
&input type="text" class="iconfont search" :placeholder='icon'&
export default {
name: 'app',
data:function(){
icon:'\ue65a 搜索音乐、视频、歌词、电台'
2、iconfont的值，必须是字体的unicode编码
阿里巴巴字体库的unicode引用为  在vue组件中引用时，则为 \ue65a
在\u加阿里unicode字体编码后4位即可。
然后就ok啦
阅读(...) 评论()分类：正规体
编码：UNICODE
作者：未知
查看ICON，请在此处输入文字(250字以内),适当用回车键换行!
请选择字号：3691112131415182022242628303238455055606570758595110120130140150160170180190200250300
ICON下载地址
素材大小：11.83 kb
下载次数：0
需要积分：0
下载地址：
下载说明：
1、同时下载多个文件，容易出现无法解压等情况。请大家下载完成一个文件后再下载另一个。
2、部分素材需要解压密码，请输入：niutuku 。
3、登录后可获得更多便利功能，如未注册，请先注册。
4、特别说明：本站"设计素材"栏目内的所有资源（包括素材、软件、资料等）仅供学习与参考，请勿用于商业用途。
/ 类别:设计体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:UNICODE / 作者:未知 / 关注:0 / 下载:0
/ 类别:正规体 / 编码:GB2312 / 作者:kingsoft / 关注:0 / 下载:0I can fly high in the sky ! That's a bird !
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。方式一：Font class 方式1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 .wxss（因为小程序只支持 .wxss 样式）。3. 把 iconfont.wxss 里面没用的代码去掉（不去掉也能用，小程序上传有代码包限制2M，所以最好去掉，你想偷懒也是可以的）上图是下载下来的源文件，把红色方框内的内容精简到下图所示4. 在 app.wxss 里全局引入 iconfont.wxss@import 'styles/iconfont.wxss';5. 在 WXML 里使用 iconfont 字体图标&text class="iconfont icon-jiazai"&字体图标&/text&方式二：Unicode 方式下载 iconfont 的时候要选 Unicode，然后点击“查看在线链接”复制里面的代码。把解压完的 iconfont.css 里 @font-face 里面的内容替换成刚才复制的代码。然后跟方式一一样的步骤引用就行了。
没有更多推荐了，iconfont基于web的用法
　　一、准备工作
　　1、首先，进入，在这个图标库里面可以找到很多图片资源，当然了需要登录才能下载或者使用，用GitHub账号或者新浪微博账号登录都可以
　　2、登录以后，可以搜索自己需要的资源，然后直接下载使用，或者建立图标库然后再使用，例如这里以删除的图标为例
　　a) 搜索删除图标
　　b) 选择需要的图标，然后可以执行三种操作：添加入库、收藏或者直接下载，可以根据自己的实际情况来选择相应操作，这里选择添加入库，操作完可以看到图标已经添加进右上角的购物车里了
　　c) 点击右上角的购物车，可以看到如下页面，这里也是根据自己的具体情况来进行操作
　　一键清除：可以清掉所有图标
　　下载素材：下载图标资源，可以指定颜色、大小以及格式
　　下载代码：下载字体图标的代码，包括demo的html和css文件、iconfont的css、js以及各种字体文件
　　添加至项目：建立一个自己的图标库，将图标整合在一起，方便后续应用在自己的实际项目中
　　d) 这里选择添加至项目，一开始没有项目，需要点击+号的图标创建一个新项目，然后把新图标加入到新项目中。如果已经有了项目，则选择项目并点击确定即可。这里的项目其实就是上面所说的图标库了
　　e) 进入到我的项目（图标库）中，可以看到如下页面
　　下载至本地：下载该图标库的代码到本地，代码包括demo的html和css文件、iconfont的css、js以及各种字体文件，demo是使用说明，iconfont文件是使用这个图标库所必须的文件，可根据使用的具体方式引用相应文件
　　Unicode、Fontclass以及Symbol：三种使用的方式，在下载到本地的代码中找到demo，demo的html文件中有这三种方式的详细使用说明
　　点击查看在线链接：在页面上可以看到一串字符串.css，这个就是这个图标库的在线链接，在实际项目中引入该链接即可使用而无需下载到本地（这个是FontClass的，Unicode跟Symbol的有属于自己的在线链接）
　　需要注意的是，如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件
　　二、使用介绍
　　以下的使用方式都是来自下载下来的demo代码，把这些都整合在一起，方便比较和查阅。至于使用在线链接的方式，因为比较简单，这里就不做介绍，可以看下面的实战
　　1、Unicode方式
　　Unicode是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持ie6+，及所有现代浏览器
支持按字体的方式去动态调整图标大小，颜色等等
不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色
　　注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式
　　使用步骤如下：
　　a)&拷贝项目下面生成的font-face，如果想要深入了解font-face属性，可以点击还有
　　@font-face {
　　 font-family: 'iconfont';
　　src: url('iconfont.eot');
　　src: url('iconfont.eot?#iefix') format('embedded-opentype'),
　　 　　　url('iconfont.woff') format('woff'),
　　　　　url('iconfont.ttf') format('truetype'),
　　 　　　 url('iconfont.svg#iconfont') format('svg');
　　b)&定义使用iconfont的样式
　　.iconfont{
　　 font-family:"iconfont" !important;
　　 font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
　　c)&挑选相应图标并获取字体编码，应用于页面
　　&i class="iconfont"&3&/i& &!--"iconfont"是你项目下的font-family，默认是"iconfont"--&
　　3是字体编码，可在下载的demo.html中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看
　　2、FontClass方式
　　FontClass是Unicode使用方式的一种变种，主要是解决Unicode书写不直观，语意不明确的问题。与Unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器
相比于Unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用即可
因为本质上还是使用的字体，所以多色图标还是不支持
　　使用步骤如下：
　　a)&引入项目下面生成的fontclass代码
　　&link rel="stylesheet" type="text/css" href="./iconfont.css"&
　　iconfont.css代码里包含了@font-face、.iconfont以及图标的unicode引用，其实对比下可以发现Unicode方式和FontClass方式是极其相似的，只不过他们一个用的是图标的字体编码，一个用的是图标的unicode引用而已
　　@font-face {font-family: "iconfont";
　　src: url('iconfont.eot?t=8'); /* IE9*/
　　src: url('iconfont.eot?t=8#iefix') format('embedded-opentype'), /* IE6-IE8 */
　　url('iconfont.woff?t=8') format('woff'), /* chrome, firefox */
　　url('iconfont.ttf?t=8') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
　　url('iconfont.svg?t=8#iconfont') format('svg'); /* iOS 4.1- */
　　.iconfont {
　　font-family:"iconfont" !important;
　　font-size:16px;
　　font-style:normal;
　　-webkit-font-smoothing: antialiased;
　　-moz-osx-font-smoothing: grayscale;
　　.icon-enter:before { content: "\e601"; }
　　.icon-setUp:before { content: "\e600"; }
　　b)&挑选相应图标并获取类名，应用于页面
　　&i class="iconfont icon-xxx"&&/i& &!--"iconfont"是你项目下的font-family，默认是"iconfont"--&
　　icon-xxx是使用了unicode引用的类名，可在下载的demo.html中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。xxx是图标的名字，你可以在网站上修改图标的名字（FontClass和Symbol都可以），但是切记如果你使用了在线链接，则必须在网站上更新在线链接，然后将该链接更新到你的项目中，如果你是本地使用，则必须下载最新的代码，然后更新到你的项目中，否则修改无效
　　3、Symbol方式
　　这是一种全新的使用方式，应该说这才是未来的主流，也是阿里矢量图标库平台目前推荐的用法，但是在前端，新技术要向老设备看齐，所以你懂得。&这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制
通过一些技巧，支持像字体那样，通过font-size,color来调整样式（对于前两种也是同样适用的，fontsize改变大小，color改变颜色）
兼容性较差，支持 ie9+，及现代浏览器
浏览器渲染svg的性能一般，还不如png
　　使用步骤如下：
　　a)&引入项目下面生成的Symbol代码
　　&script src="./iconfont.js"&&/script&
　　b)&加入通用css代码（引入一次就行）
　　.icon {
　　 width: 1em; height: 1em;
　　vertical-align: -0.15em;
　　fill: currentColor;
　　overflow: hidden;
　　c)&挑选相应图标并获取类名，应用于页面
　　&svg class="icon" aria-hidden="true"&
　　&use xlink:href="#icon-xxx"&&/use&
　　&/svg&
　　三、实战
　　1、本地使用
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&iconfont&/title&
&style type="text/css"&
@font-face { /* 实际使用中是各用各的，这里不想写那么多例子，所以就共用了一个，并不推荐这样 */
font-family: "iconfont";
src: url('css/iconfont/iconfont.eot?t=8'); /* IE9*/
src: url('css/iconfont/iconfont.eot?t=8#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('css/iconfont/iconfont.woff?t=8') format('woff'), /* chrome, firefox */
url('css/iconfont/iconfont.ttf?t=8') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('css/iconfont/iconfont.svg?t=8#iconfont') format('svg'); /* iOS 4.1- */
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
.icon-sendMsg:before { content: "\e60c"; }
　　　　 .icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
&script type="text/javascript" src="css/iconfont/iconfont.js"&&/script&
&div style="width: 100%;text-align:"&
&p&&i class="iconfont"&&/i&Unicode&/p&
&p&&i class="iconfont icon-sendMsg"&&/i&FontClass&/p&
&p style="font-size: 3"&
&svg class="icon" aria-hidden="true"&
&use xlink:href="#icon-sendMsg"&&/use&
　　运行代码可以看到字体图标已经出来了
　　2、在线链接使用
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&iconfont&/title&
&link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.css"&&!-- fontclass --&
&style type="text/css"&
@font-face { /* Unicode */
font-family: 'iconfont';
/* project id 293930 */
src: url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.eot');
src: url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.eot?#iefix') format('embedded-opentype'),
url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.woff') format('woff'),
url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.ttf') format('truetype'),
url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.svg#iconfont') format('svg');
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
.icon-sendMsg:before { content: "\e60c"; }
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
color: #fff;
&script type="text/javascript" src="http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.js"&&/script&&!-- Symbol --&
&div style="width: 100%;text-align:background: #000;padding: 20px 0;"&
&p&&i class="iconfont"&&/i&Unicode&/p&
&p&&i class="iconfont icon-sendMsg"&&/i&FontClass&/p&
&p style="font-size: 3"&
&svg class="icon" aria-hidden="true"&
&use xlink:href="#icon-sendMsg"&&/use&
　　运行代码可以看到字体图标已经出来了
　　转载请注明出处：
没有更多推荐了，