I have used for the first time an Awesome Font Icon.
I have put it just after the text as below, but the arrow has gone just below the text.
<a class="button" href="/Contatti.html">xxx xxxxxx xxxxx xxxxx xxxxx<i class="fa fa-chevron-circle-right">
How could I position it just close to the end of the text after the last charachter?
Wrap both with a span with:
white-space: nowrap;
Related
I'm using Wordpress and I want to remove author info from a box in the footer.
This is the HTML code of the box:
<footer class="entry-footer clearfix">
: :before
<span class="entry-cats">
<span class="entry-label">
<i class="fa fa-tag">
: :before
</i>
Categorie:
</span>
Quale scegliere
</span>
<!--End .entry-tags-->
<span class="entry-separator">
: :before
/
</span>
<a class="entry-comments" href="#">Nessuna risposta</a>
<span class="entry-separator">/</span>
di
<a class="entry-author" href="http://ec2-52-57-169-182.eu-central-1.compute.amazonaws.com/author/user/">Admin</a>
: :after
</footer>
This is the image of
Footer box
I just removed author name directly in CSS with:
.entry-author{
display:none !important;
}
Now I need to remove the slash between "Nessuna risposta" and also the word "di" (in English "by").
I don't know how to do because this is text and not a class.
Firefox Inspector show the text as #text
If you want to watch it directly on the website, go here and later go down on the page.
Thanks.
For the slash it's a.entry-comments + span.entry-separator: { display: none; }
For the word "di" it would be best to wrap it in a span and assign that a class, which you can hide with display: none;.
Expected behavior: long line of text wraps to next line.
Actual behavior: Long line of text does not wrap and instead automatically goes to next line with no wrapping.
Current HTML:
<p style="" class="subject">
<span data-l10n-id="message-subject">Subject:</span>
<span style="" class="detail">Re:jkla;sjdfkjasdf;jkasd;flkjasdf;kljasdf</span>
</p>
The span with the class detail has the css style word-wrap:break-word.
You need to give some space between the word. Other wise it is counted as whole word.
<p style="" class="subject">
<span data-l10n-id="message-subject">Subject:</span>
<span style="" class="detail">Re: jkla; sjdfkjasdf; jkasd; flkjasdf; kljasdf</span>
</p>
span{
word-break: break-all;
}
Working Fiddle
so I'm trying to keep the code down to a minimum is there a way I can add a margin to the text of this href without moving the font awesome icon down also. The only way I can see to do it would be to wrap a span tag around it and setting that to have a margin.
<a id="btn" class="green-btn"><i class="social fa fa-share fa-2x"></i>Share</a>
If you want space betweeen the icon and the text try this:
.green-btn .fa-share{
margin-right:5px /*or your custom value*/
}
or
#btn .fa-share{
margin-right:5px /*or your custom value*/
}
I have a button which I'm using multiple times in my webpage. The buttons styles will be as
Button with Text and Image.
Button with only Image.
Button with only Text.
As shown in the fiddle
http://jsfiddle.net/xzBaZ/4/
I'm using he same css for the button class. I need to align the Text Vertically to center if it is the first case. and no extra alignment is required for other cases.
How can I do this??
vertical-align: bottom on the <img> or make the image and the text equal line heights. The latter requires you to know the image height beforehand.
You should Write the text in span
<button onclick="return false" class="super button"><span>Awesome Button ยป
</span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>
and also specify the css for span
.button span{
float:left;
margin-top:3px;
}
I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.