关于Input输入框输入显示图标的问题

Question

如图

这是一个首饰定制页面 定制字印 我点击下方的按钮 上方Input 会显示对应的图标 就是字体信息
当然
比如 我下方的第一个 的innerhtml 是 '='
我点了之后 上方也会增加一个 '=' 但是显示出来就是一个图标 怎么完成的？

Answer 1

当它是一个富文本编辑器行不行？这样就可以输入文字，选择指定的图片，就显示指定的图片。不过这可能把找到的插件二次开发。

如果只是点击指定的按钮，出现特定的图片或文字的话，就可以用div去模拟，用一个变量去存储点击的东西：
比如你点了一个图片的按钮，我就在data += '<img src="url" />'，然后输出到div。

Answer 2

请参考：字符实体

你看到的文字实际上本身是一些编码，而每个编码会对应到字体文件的某一个矢量图像。
浏览器获取到编码对应的矢量图像之后再渲染到页面上，就是我们现在看到的样子；
如果编码不对会显示乱码，常用的有UTF-8,GBK；
如果字体文件里面没有对应的编码，文字会显示不出来；

CSS3标准里加入了@font-face规则，允许你引入外部字体文件，设置自定义字体。

这里应该就是用的自定义字体；先制作好字体文件，在这里输入预设的编码，从而显示出预设的图案