如何在输入标签的占位符中添加材质图标

Posted

技术标签:

【中文标题】如何在输入标签的占位符中添加材质图标【英文标题】:How to add material icon in the placeholder of input tag 【发布时间】:2020-08-12 15:18:12 【问题描述】:

我的输入标签如下

 <input type="text" placeholder="search place../>

我想在带有这些标题的占位符中添加一个材质图标&lt;i class="medium material-icons"&gt;location_on&lt;/i&gt;

谁能告诉我该怎么做?我已经在 html 文件中包含了材料图标链接样式表

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

【问题讨论】:

【参考方案1】:

试试这个:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input
  type="text"
  placeholder="&#xf689; Search place..."
  style="padding: 5px; font-family: Arial, 'Font Awesome 5 Free';"
/>

希望对您有所帮助,只需使用一些 padding 和 css 来使其更美观

【讨论】:

以上是关于如何在输入标签的占位符中添加材质图标的主要内容,如果未能解决你的问题,请参考以下文章

如何在输入的占位符中使用 open-iconic-bootstrap

使用 React 的输入占位符中的 FontAwesome 图标

如何在占位符中动态生成的标签之间创建换行符?

在 UITextField 占位符中输入文本时,应一次消失一个字母

如何在输入占位符中为主文本和子文本应用不同的样式?

用于输入占位符的 HTML5 图像图标