图标在引导4里面输入

我要寻找一个解决方案来创建和输入这样一个自举4 图标在引导4里面输入

我使用的字体真棒，这是我使用

   <div class="input-group"> 
       <label class="control-label">Username</label> 
       <input type="text" class="form-control" placeholder="Username" /> 
       <span> 
        <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
       </span> 
      </div>

代码

，但我得到的图像进行输入的任何帮助，请 https://jsfiddle.net/5db2ho62/

来源

2017-05-29 Mohamed Sherif Noureldin

创建一个小提琴。我可以编辑 –

你能描述你想要达到的目标吗？您提供的图像不会加载（另外，为了下一代的缘故，您不应该依赖SO中的图像） – Shtut

@SyamPillai SO有[内置片段]（https：// stackoverflow。blog/2014/09/16/introduction-runnable-javascript-css-and-html-code-snippets /）now;在这种情况下没有任何理由在网站外链接 – MTCoster

你并不需要有输入 - 里面的图标，你可以下一个放置在中放置字段，并使用CSS删除输入字段的边框。

HTML：

<div class="input-group"> 
<i class="fa fa-user-circle-o"></i> 
<input type="text" class="form-control" placeholder="Enter Name Here" > 
</div>

CSS：

input{ 
    border:none; 
    background-color: transparent; 
} 

input:focus, 
select:focus, 
textarea:focus, 
button:focus { 
    outline: none; 
} 

.fa-user-circle-o{ 
    color: gray; 
}

更新小提琴： https://jsfiddle.net/5db2ho62/2/

来源

2017-05-29 13:28:32 Shtut

但我需要它有一个像上面的图像的边框 –

@MohamedSherifNoureldin你可以添加一个边框到外部div，它看起来是相同的 - 更新小提琴 – Shtut

的解决方案是可能的占位符使用unicode。这里的cheatsheet所有字体真棒统一http://fontawesome.io/cheatsheet/

input { 
 
    padding:10px; 
 
    font-family: FontAwesome, "Open Sans", Verdana, sans-serif; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <label class="control-label">Username</label> 
 
    <input type="text" class="form-control" placeholder="&#xf075; Username" /> 
 
</div>

来源

2017-05-29 13:32:30

这里是解决

span{ 
 
    position: absolute; 
 
    margin-left: 5px; 
 
    height: 25px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
input{ 
 
    padding-left: 25px; 
 
    height: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="input-group"> 
 
    <span> 
 
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
 
    </span> 
 
    <input type="text" class="form-control" placeholder="Username" /> 
 
</div>

这里工作fiddle

来源

2017-05-29 13:35:00

-1

将图标置于文本区域内不是一个很好的解决方案。最好的方法是创建一个简单的解决方法。所以首先我们将创建一个表单和输入字段之前的图标如下图所示：

input { 
 
    border: none; 
 
    background-color: white; 
 
} 
 

 
input:focus, 
 
select:focus, 
 
textarea:focus, 
 
button:focus { 
 
    outline: none; 
 
}

<div class="input-group"> 
 
    <i class="fa fa-user"></i> 
 
    <input type="text" class="form-control" placeholder="Please enter your name" > 
 
</div>

见jsfiddle

下了一些造型，我们将做出一些改变，使它看起来像它的一个input场：

input { 
 
    border: none; 
 
    background-color: transparent; 
 
} 
 

 
.fa-user { 
 
    padding: 5px; 
 
} 
 

 
.input-group { 
 
    border: 1px solid black; 
 
    width: 250px; 
 
} 
 

 
input:focus, 
 
select:focus, 
 
textarea:focus, 
 
button:focus { 
 
    outline: none; 
 
}

<div class="input-group"> 
 
    <i class="fa fa-user"></i> 
 
    <input type="text" class="form-control" placeholder="Please enter your name" > 
 
</div>

看jsfiddle

希望这有助于！

来源

2017-05-29 13:39:09 Deathstorm

图标在哪里？ –

图标在引导4里面输入

回答

相关问题