1、vue是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网:

2、举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如下所示：

<el-form :inline="true">
          <el-form-item label="城 市  :">
               <el-input type="text" suffix-icon="el-icon-search" ></el-input>
          </el-form-item>
          <el-form-item>
               <el-button type="primary" size="mini" icon="el-icon-search"     
                 @click="butSearch()">查询</el-button>
          </el-form-item>
</el-form>

 如上图代码所示，我们在input框后端添加了一个搜索的图标，使用的方法就是输入框尾部图标suffix-icon="图标名称"，如果是要输入框前端图标则是prefix-icon="图标名称"，而在button按钮中我们直接使用了图标属性icon="图标名称"，所以，想要使用什么样的图标，一定要清楚图标名称是什么样的，便可以直接使用了。

3、图标名称及图标。

 

 以上是Element ui2.15.6版本下的图标和图标名称，如果您使用的是其他版本的Element，请参考Element官网文档，地址是：Element - The world's most popular Vue UI framework

 路漫漫其修远兮，吾将上下而求索，希望此篇文章对大家有所帮助......