How to adjust font awesome down arrow via css


Tags: css,font-awesome

Problem :

I'm using font awesome and I'm using one of the down arrows next to some text to indicate a dropdown but the arrow is very low next to the adjust and I would like to be able to raise the arrow but can't seem to figure out how.

Here is a fiddle of what I"m using http://jsfiddle.net/bns77e8t/

<span>Would like down arrow to be raised a bit</span> <i class="fa fa-sort-desc">

If you look at the fiddle you'll see the arrow is very low next to the text and I tried using negative margin but it doesn't seem like it has any effect on it.



Solution :

If you need more precise control, try using position: relative and adjust the top offset, for example:

i {
    position: relative;
    top: -3px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>Would like down arrow to be raised a bit</span> <i class="fa fa-sort-desc">


    CSS Howto..

    How to make an image fully flexible in terms of display size?

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    How can i use “z-index” as an css attribute selector?

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How to use CSS to create a dynamic corner frame?

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to use `attr` when not on `content` property [duplicate]

    How can I make the background of an HTML div black?

    How can I add shading to edges of the default ASP.NET page?

    R shiny: How to change the width of a progress-bar

    How to make a CSS transition work “backwards”?

    How do I vertically center text and have the dark blue bar go across the entire screen

    CSS, how to add picture in the corner of every columns

    How to change the height of div with the content of other div

    how to get fixed table columns width

    How can I change the text decoration on numbers only on my web page?

    How can I use bootstrap in css file?

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How do I animate my CSS progress bar?

    Linkedin Follow Button not showing properly in Firefox

    how to position icon just after h2 tag using :after pseudo even though 100% width

    How to enable overflow scrolling within a Semantic Ui Grid?

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    how to apply CSS for @Html.DisplayFor?

    How to make a left and right panel, and be able to slide a divider between them?

    How do I alter my Jquery slideshow to change size in different screen resolutions

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to debug html code for which css is being applied? [duplicate]

    How would you vertically justify text with css/Javascript?

    How to add an unknown amount of dots to a line depending on length of word?