I have a contact us page in which I have a picture followed by an icon and some text. I want to align the text beside the icon.
<div class="col-lg-7 col-md-7 col-xs-7" style="text-align: center;">
<img src='../assets/img/Website-Png/map2.jpg' >
<br><br><br>
<div>
<i class="fa fa-map-marker" id="contact_icon1" aria-hidden="true"></i>
<span class="contact_font1">505-506, Kshitij Building, Veera Desai Rd, <br> Andheri West, Mumbai 40 0053</span>
</div><br>
<div>
<span>
<i class="fa fa-phone" id="contact_icon2" aria-hidden="true"></i>
</span>
<span class="contact_font2">+91 22 6470 1000</span>
</div><br>
<div>
<span>
<i class="fa fa-envelope-o" id="contact_icon3" aria-hidden="true"></i>
<span class="contact_font3">info#mentoria.com</span>
</span>
</div>
</div>
try this
add class to your div :
<div class="icon-text-group">
<i class="fa fa-map-marker" id="contact_icon1" aria-hidden="true"></i>
<span class="contact_font1">505-506, Kshitij Building, Veera Desai Rd, <br> Andheri West, Mumbai 40 0053</span>
</div>
then add css for the class :
.icon-text-group i, .icon-text-group span {
display: inline;
}
You do not need to use too much divs and though if you want to use div no need to use line break. As, div is block level element, it will automatically start on next line. You can use <p></p> instead.
also,
you can write text immediately after <i></i>
eg,
<p>
<i class="fa fa-map-marker"></i> 243 Elm Street,Claremont,NH 03743
<i class="fa fa-phone"></i> 603-542-7771
</p>
You can add contact number in anchor tag, and if you need you can add class to anchor tag.
Always try to wrap up your code in as less divs as possible. This will help to load your page faster.
Related
In the this codepen I have a row with 3 div tags and each div tag has 1 icon tag. However, I am getting 2 extra icon tags showing below the ID column. Where are theses extra icons coming from? When I inspect element it appears to be under my container class but it is not what is in my html. Thank you.
This is what I have in the html:
<div class="row">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="id-caret" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="bird-name-caret" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="bird-type-caret" class="fa fa-caret-down"</i></span></div>
</div>
It occurs because of there is unclosed <i> tag:
<div class="col-4">
<span ng-click="sortBy('Type')">Type of Bird
<i id="bird-type-caret" class="fa fa-caret-down"></i>
</span>
</div>
I'm working on a project and had the following code snippet:
<h2 style="color: #818181;">Details</h2>
<p><i class="fa fa-envelope"></i> xxxxxxx#gmail.com<br>
<i class="fa fa-phone"></i> 12345678<br>
<i class="fa fa-map-marker"></i> 1 Yeet Street, Azerbaijan</p>
This left me this:
Image
Is there any way that I can reduce the line break between the header and the icons without the icons starting on a new line to their text?
The vertical space is a combination of the default top/bottom margins of both the h2 and the p elements. You will need to add styles to reduce/remove the margin, margin-top and/or margin-bottom using a CSS stylesheet:
h2 {
margin: 0;
}
p {
margin: 0;
}
Or using the inline styles:
<h2 style="color: #818181; margin: 0">Details</h2>
<p style="margin-top: 0;"><i class="fa fa-envelope"></i> xxxxxxx#gmail.com<br>
<i class="fa fa-phone"></i> 12345678<br>
<i class="fa fa-map-marker"></i> 1 Yeet Street, Azerbaijan</p>
I have maybe simple problem but I really don't know what's wrong :(
http://airbyt.cz/byty Images in the divs are not loaded in all browsers except google chrome and chrome mobile. It doesn't log error in the path.
there is code.
<main>
<div class="object-byt"><h1>Modern apartment close to center with jacuzzi</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-1.jpg" alt="interior"></div></div>
<div class="object-byt"><h1 class="broken">Cozy apartment in Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-2.jpg" alt="interior"></div></div>
<div class="object-byt"><h1>Super luxury apartment in center of Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-3.jpg" alt="interior"></div></div>
<div class="object-byt"><h1>Great apartment in center of Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-4.jpg" alt="interior"></div></div>
<div class="object-byt"><h1 class="broken">Cozy apartment in heart of Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-5.jpg" alt="interior"></div></div>
</main>
I will be glad for every advice. Thank you
Your image is in webp format which is only read by Chrome. You need to convert it to a regular image file. I tried http://image.online-convert.com/convert-to-jpg on one of your images and it worked. I'm sure there are many other solutions as well.
I am trying to place fa-graduation-cap inside a circle.
So, that means:
<span class="fa-stack">
<i class="fa fa-circle fa-stack-4x text-primary"></i>
<i class="fa fa-graduation-cap fa-2x"></i>
</span>
But it doesn't work. The output is this:
The graduation-cap is outside the circle. Why is that?
Note:
text-primary is the bootstrap class for color.
You're not applying those classes in the correct way/order.
Following the code from the examples, here we go.
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-graduation-cap fa-stack-1x fa-inverse"></i>
</span>
If you want it to be bigger just add a class fa-2x, fa-3x, fa-4x or fa-5x to the span, nothing else.
Check it on this fiddle.
How are you trying to put the elements together with CSS ?
you probably need to position the icons individually to place them where and how you want them. This could possibly be done with the following:
.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}
you can move the icons over the screen by changing the pixels in the top value and the left value for example.
I've been really frustrated over the issue, searched many options, found none to work, and do not have the heart to ponder over it further.
The website in question is https://flix-c9-airbusai342.c9.io/.
Here, I'm having issues with the columns being too wide in mobile. Yes, they are properly stacking, however, not sure what's causing it to be too wide.
Below is a direct snippet of the code of the area in question. The class .stats is onlybackground-color: #D8D8D8; for changing background color.
<section class="stats">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-4" align="center">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x turquoise"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span>
<h2>Professional Coding</h2>
<span class="text-muted"><p>A team of experienced web developers are ready to give you the best quality code available to be provded for you. <b>Each</b> and <b>every</b> time.</p></span>
</div>
<div class="col-md-4" align="center">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x turquoise"></i>
<i class="fa fa-bolt fa-stack-1x fa-inverse"></i>
</span>
<h2>Dedicated Team</h2>
<span class="text-muted"><p>Nothing's perfect. Even us. Thus, our dedicated team is ready to help you whenever you need it, even if it means sacrificing leasure time.</p></span>
</div>
<div class="col-md-4" align="center">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x turquoise"></i>
<i class="fa fa-mobile fa-stack-1x fa-inverse"></i>
</span>
<h2>Mobile compatible</h2>
<span class="text-muted"><p>We know the new trends of websites. Meeting popular demand, our websites by default look great on any device across. Even this website.</p></span>
</div>
</div>
</div>
I openly allow you to view the page source of the website.
Thank you for any assistance; my dull mind is suffering. :)
You have a min-width of 960px on your .section
Removing that will solve a lot of things. If you do not want your content to stretch to the full width of the window, use a max-width: 960px; instead. Otherwise, just remove the min-width of 960px
Remove .row-fluid and use .row.
Remove align="center" that's old stuff
Use .text-center on the parent of the stuff you want centered (provided it's inline or inline-block elements)
Use .center-block on any block elements (like an .img-responsive).