CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
VSO
VSO

Reputation: 12646

Font Awesome Styling Q (Buttons In-Line)

This is kind of a silly question since there is a simple answer, but I am trying to use font-awesome buttons in-line, as shown in this plunk.

If I do this:

            <td class = "col-xs-1">
                <span class="btn yellowFont fa fa-star"
                      title = "Set this as the item's primary case."
                      ng-if="!case.primaryCase">
                </span>

                <span class="btn redFont fa fa-times"
                      title = "Remove item from case."
                      ng-if="!case.primaryCase">
                </span>
            </td>

the "btn" class pushes the second font-awesome icon to a new line. I can avoid this by removing the btn class, e.g. 

<span class="redFont fa fa-times"...>

But this removes the default hover-over behavior, which I want to keep.

Yet another solution is to have them in separate cells, but that makes the spacing between them far too wide (even 1/12 makes it too wide, and I don't know if I can further sub-divide table cells like I could with a normal grid, e.g. col-xs-1 for the cell and then col-xs-6 for each of the spans.

In short, is there a way to have the font-awesome icons in line, next to the "Case Name" column, while keeping the default hover-over functionality (Yes, I do realize I can easily add a "on-mouseover" event, it's just dirty.

Upvotes: 2

Views: 151

Answers (1)

herrh
herrh

Reputation: 1368

You need to update the grid widths like shown below. In fact of the bootstrap grid should have 12 cols, take 3 and 9.

         <td class = "col-xs-3">
            <span class="btn yellowFont fa fa-star"
                  title = "Set this as the item's primary case."
                  ng-if="!case.primaryCase">
            </span>

            <span class="btn redFont fa fa-times"
                  title = "Remove item from case."
                  ng-if="!case.primaryCase">
            </span>
        </td>
        <td class = "col-xs-9">
                {{case.caseNumber}}
            </td>

Upvotes: 4

Related Questions