css 用户名和密码引导图标

whhtz7ly 于 2022-12-05 发布在其他

关注(0)|答案(3)|浏览(172)

我正在设计登录页面。在这里我添加了用户名和密码的图标，当我添加图标时，一些其他图标也添加了如何解决这个问题。这是我的代码。

<div class="left-inner-addon ">
            <i class="icon-user"></i>
            <input type="text" placeholder="User Name" name='j_username' >
</div></div>

且CSS如下，

<style type="text/css">
.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}
</style>

我没有声誉张贴照片的登录形式。

css

来源：https://stackoverflow.com/questions/22217992/bootstrap-icon-for-username-and-password

3条答案

按热度按时间

83qze16e1#

我得到了你所面临的想法，根据Twitter Bootstrap的当前标准，你只需要使用下面的代码来实现你想要的。我已经测试了它在现场服务器，它是工作正常。只需替换您的HTML代码以下代码：

<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-user"></span>
  <input type="text" class="form-control" placeholder="User Name" name='j_username'>
</div>

我希望这能帮上忙。

赞(0）回复(0）举报 2022-12-05

velaa5lx2#

我正在为你的问题写一个新的答案。按照这个代码。这肯定会有帮助。
以下是文本框的HTML：

<div class="input-group">    
<input type="text" placeholder="User Name" name='j_username'  id="funkystyling" />
</div>

下面是左侧图像的CSS：

#funkystyling {

    background: white url(/path to icon.png) left no-repeat;

    padding-left: 17px;

}

下面是右侧图像的CSS：

#funkystyling {

    background: white url(/path to icon.png) right no-repeat;

    padding-right: 17px;

}

赞(0）回复(0）举报 2022-12-05

8iwquhpp3#

带 Bootstrap 2.3.2
HTML语言
<div class="left-inner-addon "> <i class="icon-user"></i> <input type="text" class="form-control" placeholder="User Name" name='j_username' > </div>
CSS

.left-inner-addon {
    position: relative;
}
.left-inner-addon input { 
    padding-left:20px;
    height:20px;
}
.left-inner-addon i {
    position: absolute;
    margin:7px 5px;
}

JSFFIDLE

赞(0）回复(0）举报 2022-12-05

我来回答

css 用户名和密码引导图标

3条答案

相关问题

热门标签

最新问答