在js中怎样在字体前面加图标

<p id="font">我要在字体前面加图标 </p>

<script>

var font = document.getElementById('font')

var img = "<img src='a.png'>"

font.innerHTML = img+font.innerHTML

</script>

这不是一个真正的“按钮”，它只是一个IMG、或者一个DIV什么的的背景，都有onclick（）事件的。那些花哨的“按钮”，绝大多数都是图片。如果你想做的花哨，你就给这个“按钮”（其实是图片）加上事件就行了，比如onmouseover（就换成图片1）onmouseout（就换成原图）onclick（就换成图片2）。。我做的项目里都是用的图片，现在网页上的<input type="button">已经很少了，大多用的是图片。。。希望对你有用

其实也很简单，我们把需要的 icon组件 注册为全局的字典，key：组件 的形式，然后就可以把字符串转换为图标组件了。

首先建立一个js文件，引入图标，做成字典的形式，再用 Vue 的插件功能注册为全局变量。

这里有两种使用方式，一种是简单粗暴的全部图标都注册了，看了一下node_modules里面的文件，一共二、三百KB，如果不太在意体积的话，可以全都弄进来。

如果使用的图标不是很多，那么可以只引入需要的图标，这样体积就小很多了。

在模板里面使用动态组件，根据图标名称加载图标，使用style设置大小和颜色，这样就可以了。

几个例子：

el-input 的 prefix-icon 属性可以设置图标，属性类型是字符串或者组件，试了一下字符串，没有效果，大概需要在使用 el-input 的组件里面注册对应的图标，这样就不方便实现动态图标了，或者全局注册图标。

既然我们做了全局注册的字典，那么属性也可以用一用。

这样就可以统一使用动态图标了。

---