CODEWITHSUNDEEP
cssfont-awesome
The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

How does one reduce the height of fontawesome text?

My site is using fontawesome. On the site, one of the icons (fa-arrows-h) is wrapped in a span tag, basically like this:

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>

I have various styles set for this arrow in an external stylesheet, including a :hover transition. Other styles include font-size 41px and the arrow has position absolute. I have also styled the cursor to be a "pointer" and for the red arrow to become orange (using the CSS3 style: transition: all 0.5s ease 0s;) on hover.

EDIT: Here are all the CSS rules:

#myArrow {
    display: none;
    font-size: 41px;
    position: absolute;
    z-index: 100;
    color: red;
    transition: all 0.5s ease 0s;
}

#myArrow:hover {
    color:orange;
    cursor:pointer;
}

Here is some jQuery that fades the arrow In:

$("#myArrow").css({"left" : (o.left + 740) + "px", "top" : (o.top) + "px"}).fadeIn(500);

One annoying thing is that the hover effect occurs about 20px above/below the text. That is, when either the bottom of the cursor touches the arrow, or the tip of the cursor is roughly 20px below the arrow, the hover transition occurs.

I have tried various things, even setting the style for both the span and the i to 

style="line-height:0;height:0"

and the arrow still appears, with the same hover issue as described above (I also tried this styling individually for both tags).

I thought the issue also might be with the css display, so I tried setting both the span and the i to 

- block
- inline
- inline-block

with no success.

I also set both the tags to have padding:0 with no success.

Note that this 20px-away hover transition only occurs vertically; when approaching the arrow horizontally (from left or right) the hover transition occurs when the user has actually hovered over the icon.

Can anyone please suggest how I would make the hover transition occur when a user approaches this icon from above or below and actually hovers over the fontawesome icon, not when the cursor is 20px away?

Upvotes: 1

Views: 1013

Answers (1)

Marcelo
Marcelo

Reputation: 4435

While not super elegant, I simply changed the #myArrow's height and set its overflow to hidden then I used margins to position the i element within.

#myArrow {
    font-size: 41px;
    position: absolute;
    z-index: 100;
    color: red;
    transition: all 0.5s ease 0s;
}

#myArrow:hover {
    color:orange;
    cursor:pointer;
}

#myArrow {
    height:20px;
    overflow:hidden;
}

#myArrow i {
    margin-top:-10px;
    display:block;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>

Upvotes: 1

Related Questions