添加字体真棒图标内联但上标与其他元素
Adding font awesome icon inline yet superscript with other element
我有两个场景有类似的问题。我正在尝试添加一个很棒的字体图标:
- 内联文本输入和 'add on' 按钮,但上标 (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
- 与 bootstrap 面板标题文本中的文本内嵌,但位于标题区域 (JSFiddle2) 的右上角
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
这是我希望每个人看起来的样子:
我不知道这是否重要,但作为旁注:
- 在第一种情况下,图标有一个弹出窗口
- 在第二种情况下,图标有一个下拉菜单
我认为这些对布局没有任何影响,所以我省略了相关代码。
我有两个场景有类似的问题。我正在尝试添加一个很棒的字体图标:
- 内联文本输入和 'add on' 按钮,但上标 (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
- 与 bootstrap 面板标题文本中的文本内嵌,但位于标题区域 (JSFiddle2) 的右上角
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
这是我希望每个人看起来的样子:
我不知道这是否重要,但作为旁注:
- 在第一种情况下,图标有一个弹出窗口
- 在第二种情况下,图标有一个下拉菜单
我认为这些对布局没有任何影响,所以我省略了相关代码。