I'm using this for my top bar text
<i class="fa fa-envelope" style="margin: 0 4px"></i>info#email.com
but in responsive design the envelope icon gets split from the mail text. I am trying to stick them together with no luck.
I have tried this but nothing
SÂ Overflow
you are looking for white-space: nowrap;
try adding the parent container of the icon and text that CSS class.
W3S link for more information
Related
I am working on this vertical menu bar ground up. I am using responsive css shown at:Responsive Web Design by W3school
The thing is this list that I am making has 5 list items using Font awesome icons.
I have a media query setup for min-width of 768 px when i drop below that the text in menu items start going on the lines below.
.
Is there any way i can align text so that they start right after the first line as in case u guys can see - services start from below the icon instead of network. I know that icons are text and hence I also tried text align but it didn't work. Please help guys.
If there is a way of aligning fonts in between both these lines it would also be helpful.
On adding bootstrap, You should be able to place both the icon and the text right by each other using grids.
<div col-xs-12 col-md-12 col-lg-12 col-sm-12>
<li>
<span class="glyphicons glyphicons-pie-chart"></span>
<b>Pie chart</b>
</li>
</div>
Looking through the examples on the fontawesome website, I notice a few make use of the class fa-fw. For example:
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
I have tried with and without it and I cannot see any notable difference.
What is the purpose of the fa-fw class?
Fixed Width Icons
I've opened the sample page in Chrome, opened inspector on the "Library"-Element of the fw-sample and removed the fw-class. This messes up the icon-alignment - and that is also mentioned as the purpose of fw: ensuring proper alignment of the icons :-)
Icon size, some icons are bigger, if you use fa fa-fw, the size of the icon will be the same regardless of how big/small it should be.
fa-fw class will align icons vertically center with fixed margin. so the size of each icon will not vary and they aligned below each other in the center.
As you can see the text on the images are not aligning correctly I have tried everything changing margin top of the css and I cannot get the text to float properly on the images can someone have a look at the css to see what may be the problem. It's the foot conditions menu that is the issue.
http://indigo.websitewelcome.com/~birchpodiatry/our-doctors
How to change the tag below as suggested by alex k in joomla 3.3?
Your using a block element within an inline element, simply change
<div class="image-title">Bunions</div>
</span>
to
<span class="image-title">Bunions</span>
</span>
I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>
If you visit http://www.timkainu.com/journal/ you can see that there are some "featured images" floating to the left of the text. How can the text wrap around the image? I've used Firebug to try and find out what part of the CSS affects it, but I failed, obviously.
The site runs on WordPress and the theme being used is called "Striking", which is found on ThemeForest.
Thanks!
You are going to have to make some change to the theme to make that work. In order for text to wrap around an image, the text and image need to be in the same container. In this case, the image is in one DIV and the text is in the DIV next to it. You'd need to move div.image_styled.entry_image inside of div.entry_info to make it work. You would probably need to make some CSS adjustments as well since it was not design to wrap around the images like that.
Are you referring to, for example, the first item "Costco Photo Center Review" with the image of Costco on the left?
The image is wrapped inside <div class="image_styled entry_image"></div>
and the text is wrapped inside <div class="entry_info"></div>, both of which are wrapped inside <article id="xxx" class="entry entry_left">
In order for text to wrap around the image, they need to be in the same container, with the image set to float: left. I'm not sure how this relates to Wordpress, but in terms of HTML and CSS, that's the way to go.