CODEWITHSUNDEEP
cssfont-awesome
BigotesDeGato
BigotesDeGato

Reputation: 74

Adding a superscript font awesome icon using CSS classes

I have the following snippet of HTML..

<ul>
    <li class="fa fa-balance-scale" id="test" />
</ul>

..with the associated CSS classes:

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-balance-scale:before {
    /* font-awesome: balance-scale */
    content: "\f24e"
}

.fa-hourglass-2:before,
.fa-hourglass-half::before {
    /* font awesome: balance-scale, fa-hourglass-half */
    content: "\f24e \f252";
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}

..and some JS to increase the size and append an hourglass after an event:

$("#test").addClass("fa-hourglass-half fa-lg")

..and I am looking to create the following (image):

desired result

Whilst I have managed it using the following...

<i class="fa" icon-before="&#xf24e" icon-after="&#xf252"></i>

i:before {
    /*balance-scale*/
    content: attr(icon-before);
    position: relative;
    font-size: 1.5em;
    margin: 0.1em;
}

i:after {
    /*fa-hourglass-half*/
    content: attr(icon-after);
    position: absolute;
    font-size: -0.5em;
    /*margin-bottom: 2.0em;*/
}

...it is not appropriate as I need to use CSS classes only. This is due to dependencies (and ensure compatibility) with other components of the application I am working on.

Is there anyone who can propose a possible solution using only CSS classes? Any advice or suggestions would also be greatly appreciated. Thank you.

With thanks to all and especially sheriffderek, this is the code which was used:

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa.loading {
    position: relative;
}

.fa.loading:after {
    display: block;
    position: absolute;
    top: -8px;
    right: -12px;
    content: '\f252';
    transform: scale(0.7, 0.7);
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}

Upvotes: 2

Views: 1466

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

If you are asking for an official 'font-awesome' way, I don't know it - but here's the logic behind how I'd try and do it.

First I would create a jsFiddle - and make sure that the font and other dependencies are loaded / so we're all on the same page: http://jsfiddle.net/sheriffderek/rqLkjmo3/2/ --- it looks like this link: http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css includes the @font inclusion and the css.

Then I would create some functionality to check:

<ul class='icon-list'>
  <li class='icon fa fa-camera-retro' id='test'></li>
</ul>

<button rel='toggle'>toggle superscript</button>

jQuery in this case: 

var $button = $('[rel="toggle"]');

$button.on('click', function() {
    $('#test').toggleClass('waiting');
});

And then lay over something - in the top corner / is this font-awesome specific? / is there an hourglass-version of 'balance-scale' ? I don't know. I couldn't get .fa-balance-scale to work...

.icon-list {
  padding: 1rem;
}

.fa.waiting {
  position: relative;
}

.fa.waiting:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: 'x'; /* whatevers */
  color: red;
  transform: translate(50%, -50%);
}

This logic should work for any type of graphic inclusion. Icons fonts were great when they were the best option, but that is no longer the case. Take a look at fontastic or something that will spit out a sprite sheet. : )

Upvotes: 2

Related Questions