element-ui输⼊框（el-input）前缀图标和后缀图标el-input是element-ui中的⼀个组件，在element-ui中⽂⼿册中有详细的介绍。其中，带 icon 的输⼊框⽰例如下：
对应的代码是：
<div class="demo-input-suffix">
属性⽅式：
<el-input
placeholder="请选择⽇期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="请输⼊内容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<div class="demo-input-suffix">
slot ⽅式：
<el-input
placeholder="请选择⽇期"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输⼊内容"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>
其中，与图标标记相关的代码是：
suffix-icon="el-icon-date"//el-icon-date对应⽇期图标
prefix-icon="el-icon-search"//el-icon-search对应搜索图标
上述代码介绍的是两种为输⼊框添加图标标记的⽅法，⼀种是通过属性，⼀种是通过slot，不管是哪种⽅式都⽤到了代表相应图标的常量字符串，那么如果我想，⽐如为账号输⼊框或者密码输⼊框添加图标标记，那么相应的常量字符串是什么？
在element-ui的中⽂⼿册中是存在对此的介绍的（Icon图标）。不过我们也可以在源码中寻，但是源码那么多，怎么？
在WebStorm中，ctrl+shift+r调出全局搜索框（在⽂件中查内容）：
注意：要选择scope，all palce ，当然如果搜索前知道更详细的位置，也是可以设置的。
输⼊我们知道的⼀个图标常量，⽐如：el-icon-date，这最终会导致我们到定义图标常量的⽂件（路径）：
然后在这哥icon.scss⾥⾯我们会发现：
.el-icon-info:before { content: "\e61a"; }
.el-icon-error:before { content: "\e62c"; }
.el-icon-success:before { content: "\e62d"; }
.el-icon-warning:before { content: "\e62e"; }
.el-icon-question:before { content: "\e634"; }
.el-icon-back:before { content: "\e606"; }
.el-icon-arrow-left:before { content: "\e600"; }
.el-icon-arrow-down:before { content: "\e603"; }
.el-icon-arrow-right:before { content: "\e604"; }
.
el-icon-arrow-up:before { content: "\e605"; }
.el-icon-caret-left:before { content: "\e60a"; }
.el-icon-caret-bottom:before { content: "\e60b"; }
.el-icon-caret-top:before { content: "\e60c"; }
.el-icon-caret-right:before { content: "\e60e"; }
.el-icon-d-arrow-left:before { content: "\e610"; }
.el-icon-d-arrow-right:before { content: "\e613"; }
.el-icon-minus:before { content: "\e621"; }
.el-icon-plus:before { content: "\e62b"; }
.el-icon-remove:before { content: "\e635"; }
.el-icon-circle-plus:before { content: "\e601"; }
.
el-icon-remove-outline:before { content: "\e63c"; }
.el-icon-circle-plus-outline:before { content: "\e602"; } .el-icon-close:before { content: "\e60f"; }
.el-icon-check:before { content: "\e611"; }
.el-icon-circle-close:before { content: "\e607"; }
.el-icon-circle-check:before { content: "\e639"; }
.el-icon-circle-close-outline:before { content: "\e609"; } .el-icon-circle-check-outline:before { content: "\e63e"; } .el-icon-zoom-out:before { content: "\e645"; }
.el-icon-zoom-in:before { content: "\e641"; }
.el-icon-d-caret:before { content: "\e615"; }
.el-icon-sort:before { content: "\e640"; }
.el-icon-sort-down:before { content: "\e630"; }
.el-icon-sort-up:before { content: "\e631"; }
.el-icon-tickets:before { content: "\e63f"; }
.el-icon-document:before { content: "\e614"; }
.el-icon-goods:before { content: "\e618"; }
.el-icon-sold-out:before { content: "\e63b"; }
.el-icon-news:before { content: "\e625"; }
.el-icon-message:before { content: "\e61b"; }
.el-icon-date:before { content: "\e608"; }
.el-icon-printer:before { content: "\e62f"; }
.el-icon-printer:before { content: "\e62f"; }
.el-icon-time:before { content: "\e642"; }
.el-icon-bell:before { content: "\e622"; }
.
el-icon-mobile-phone:before { content: "\e624"; } .el-icon-service:before { content: "\e63a"; }
.el-icon-view:before { content: "\e643"; }
.el-icon-menu:before { content: "\e620"; }
.el-icon-more:before { content: "\e646"; }
.el-icon-more-outline:before { content: "\e626"; } .el-icon-star-on:before { content: "\e637"; }
.el-icon-star-off:before { content: "\e63d"; }
.el-icon-location:before { content: "\e61d"; }
.el-icon-location-outline:before { content: "\e61f"; } .el-icon-phone:before { content: "\e627"; }
input标签placeholder属性.el-icon-phone-outline:before { content: "\e628"; } .el-icon-picture:before { content: "\e629"; }
.el-icon-picture-outline:before { content: "\e62a"; } .el-icon-delete:before { content: "\e612"; }
.el-icon-search:before { content: "\e619"; }
.
el-icon-edit:before { content: "\e61c"; }
.el-icon-edit-outline:before { content: "\e616"; }
.el-icon-rank:before { content: "\e632"; }
.el-icon-refresh:before { content: "\e633"; }
.el-icon-share:before { content: "\e636"; }
.el-icon-setting:before { content: "\e638"; }
.el-icon-upload:before { content: "\e60d"; }
.el-icon-upload2:before { content: "\e644"; }
.el-icon-download:before { content: "\e617"; }
.el-icon-loading:before { content: "\e61e"; }
.el-icon-loading {
animation: rotating 2s linear infinite;
}
.el-icon--right {
margin-left: 5px;
}
.el-icon--left {
.el-icon--left {
margin-right: 5px;
}
据此，我们便可以知道有哪些图标常量字符串可以使⽤，根据名字我们也⼤概能知道是做什么的。如⽂件所⽰，content: "\e621"
应该是指向实际的图⽚的，那么这些图⽚⼜保存在哪呢？
1.如果每个图标对应的仍旧是代码，那么就需要在⽂件中查内容；
2.如果每个图标对应⼀个⽂件，那么需要全局搜索⽂件。
图标对应代码的情况只需使⽤和上⾯相同的⽅法即可：
ctrl+shift+r进⾏全局查（只要是全局查即可，这个组合快捷键不仅可以查，还可以替换呢，在当前⽂件中查并替换的快捷键组合是ctrl+r）。
遗憾的是并没有查到可以看出来是图标的东西。
那么，如何在全局按照⽂件名查⽂件呢？
ctrl+n：搜索类
ctrl+shift+n ：搜索⽂件
没有到。那么图标字符串后⾯的：
{ content: "\e605"; }
这个东西到底什么？
⽹上有⼈问下⾯代码的含义：
icon-menu:before { content: '\e80e”}
有⼈回答说：
这是css样式代码，意思就是在class为icon-menu的前⾯加⼀个内容e80e，应该是⼀个字体图标。
要改变的话，你要再⼀个字体⽂件，⽤相应的代码替换就好，或者直接换张图⽚也是可以的。
还有⼈问：
css content:"\e608\e609"
这是某⽹站的⼀个CSS⽂件中看到的，该CSS中⼤量应⽤了这种⽅式来输出内容。
我知道content可以输出内容，他这个\e608和\e609类似⼀个变量，
可以输出⽂字，也可以输出图⽚等等。如果是变量的话，可我却没到他在哪⾥定义的。
有⼈回答说：
这个⼀般是⽤字体做为⼩图标的⽅式，content输出的是这个字符的编码，⽽字体库⾥对应的是
这个字体的内容，可以仔细看⼀下css开头的部分，会有⼀个 font-family 定义，
指向的是⼀个字体⽂件。
通过这两个问答，我们⼤致可以知道，接下来怎么做了。
⾸先，在当前⽂件中查 font-family，结果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。