添加字体真棒图标内联但上标与其他元素

Question

我有两个场景有类似的问题。我正在尝试添加一个很棒的字体图标：

内联文本输入和 '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>

这是我希望每个人看起来的样子：

我不知道这是否重要，但作为旁注：

在第一种情况下，图标有一个弹出窗口
在第二种情况下，图标有一个下拉菜单

我认为这些对布局没有任何影响，所以我省略了相关代码。

Answer 1

对于第一个问题，你的HTML结构是错误的。您需要在 input-group DIV 内添加图标。另外要做上标，你需要一个 CSS class 。这是给您的更新代码：

JS Fiddle

对于你的第二个问题，你的 DIV 必须与浮动内联显示。这是它的 CSS：

.dropdown {
  display:inline-block;
  float:right
}

Answer 2

第一期：JS Fiddle

如 Raed N. 所说，对于您的第二期，只需在您的下拉列表中添加一个 float:right：

.dropdown {  float:right; }

添加字体真棒图标内联但上标与其他元素

Adding font awesome icon inline yet superscript with other element

css

twitter-bootstrap

font-awesome