点晴MIS问题教程区 加入收藏
问题搜索
 您的位置:点晴OA办公管理信息系统『 经验分享&问题答疑 』浏览当前教程  
  

  网站搜索
  搜索范围: 搜索方式: 关键词(可用空格分开)  

  作者及文章信息: 本文热度:21 % 
admin

积分:80425
等级:网站管理员
文数:14911
注册:2004-7-20

 信息   主页       

楼 顶 

 在input按钮里添加字体图标


如图,为一个搜索框添加一个放大镜形状的小图标,点击小图标能够submit表单

 

方法一

参考:https://stackoverflow.com/questions/48042213/how-to-use-fontawesome-icon-as-submit-button-in-html-form

修改input属性,代码如下:

HTML结构:

<body>
    <div class="search">
        <form action="search"  target="_blank">
          <input type="text" name="search" placeholder="搜索">
          <input style="font-family: icomoon" value="&#xe986" type="submit">
        </form>
    </div>
</body>
 
 1、直接为input添加font-family属性,把value设定成"&#x对应图标的编码"。
<input style="font-family: icomoon" value="&#xe986" type="submit">

 

2、然后用CSS为图标设定样式。

      .search input[type="submit"] {
        /* 把submit按钮调整到和图标大小相同 */
        width: 20px;
        height: 20px;
        font-size: 20px;
        border: 0;
        background-color: transparent;
        position: absolute;
        right:14px;
        top:50%;
        transform: translateY(-50%);
  /* 鼠标移上去有点击提示 */
        cursor:pointer;
      }


方法二

在div::after插入一个图标,定位到目标位置。

 
1、HTML结构不变,把input的value设置为空:
<input value="" type="submit">
 
2、在div后面插入图标
      div::after{
          font-family: "icomoon";
          font-size: 20px;
          color: #000;
          content:"\e986";
          position: absolute;
          right:14px;
          top:50%;
          transform:translateY(-50%);
          /* 加上这一句,图标就不会挡住点击按钮,达到点击图标就能submit的效果,参考:
          https://stackoverflow.com/questions/28284105/font-awesome-icon-and-text-in-input-submit-button
          */
          pointer-events: none;
      }
 
3、把submit按钮设置成和图标一样的大小,并且用定位使图标和submit按钮重合:
      .search input[type="submit"] {
        width: 20px;
        height: 20px;
        border: 0;
        background-color: transparent;
        /* 鼠标移上去有点击提示 */
        cursor: pointer;
        position: absolute;
        right:14px;
        top:50%;
        transform:translateY(-50%);
      }

该文章在 2023/5/17 18:45:00 编辑过

  离 线  2023/5/17 18:44:59 
  本文章共有 0 页, 0 张回文,每页有 10 张回文 >> [ ]
页码:  
Copyright 2010-2023 ClickSun All Rights Reserved