CODEWITHSUNDEEP
cssfont-awesome
shenkwen
shenkwen

Reputation: 3880

where does the space between a FontAwesome icon and an A tag comes from?

Live page: http://xrsand.com/index.php?option=com_k2&view=item&layout=item&id=92&Itemid=305

Every mosaic has two lines under the image, each line has a FA icon in the front of it. The first line is a link, while the 2nd is plain text. I am using fa-fw to keep the icon at same size and to align the texts. But there seems to be a white space between the icon and the A tags that comes from nowhere, in order to keep texts align, I have to manually add a space between the icon and the text for the 2nd line. For demonstration purpose, I omit this space for the 1st mosaic, you can see the texts are not aligned in it. I think I encounter this problem before, and that was without FA, I can recall it involves some mysterious space between spans, but I can't reproduce the scenario. So probably this has nothing to do with FA.

Upvotes: 1

Views: 1466

Answers (1)

nanndoj
nanndoj

Reputation: 6770

The problem is the indentation you used when rendering the content. It is considered as a single space by the browser:

<h2 class="sprocket-mosaic-title"><i class="fa fa-newspaper-o fa-fw"></i>
                <a href="/index.php?option=com_k2&amp;view=item&amp;id=90:2015-02-05-15-33-34&amp;Itemid=305">                      同圆共享中国梦                 </a>                </h2>

Try to remove it when render the page and put the <i> tag together with <a> tag. It should solve the issue.

<h2 class="sprocket-mosaic-title">
     <i class="fa fa-newspaper-o fa-fw"></i><a href="/index.php?option=com_k2&amp;view=item&amp;id=90:2015-02-05-15-33-34&amp;Itemid=305">同圆共享中国梦</a>
</h2>

The same happens when you add many spaces to a content:

   <a href="anything">         It will be rendered with a single space</a>

Upvotes: 3

Related Questions