CODEWITHSUNDEEP
csstwitter-bootstrapfont-awesome
Spencer K.
Spencer K.

Reputation: 469

Adding font awesome icon inline yet superscript with other element

I have two scenarios with similar problems. I'm attempting to add a font awesome icon:

  1. Inline with a text input and 'add on' button, yet superscript (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>

  1. Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (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>

Here's how I'd like each to look:

  1. enter image description here
  2. enter image description here

I don't know if this is important, but as a side note:

  1. In the first scenario, the icon has a popover
  2. In the second scenario, the icon has a dropdown

I don't think these have any effect on the layout, so I left out the related code.

Upvotes: 4

Views: 4861

Answers (2)

Andrew Adam
Andrew Adam

Reputation: 1582

For your first issue: JS Fiddle

For your second issue as Raed N. said before just add a float:right to your dropdown:

.dropdown {  float:right; }

Upvotes: 2

Raed N.
Raed N.

Reputation: 172

For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:

JS Fiddle

For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:

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

Upvotes: 3

Related Questions