I have added the class center-block to be able to vertical center the Torza image. But no result, any suggestions?
<?php
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
?>
You can use the code below:
HTML
<div class="container">
<hr />
<div class="torza-box">
<img src="img/logo_torza.png" alt="Torza" width="85">
<div class="links-box">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i></div>
</div>
<hr />
</div>
CSS
.torza-box{
position:relative;
}
.links-box{
position:absolute;
top:50%;
right:10px;
transform:translatey(-50%);
}
if you added bootstrap CSS URL then this work as good, otherwise you write simple CSS code here...
.center-block a {
display:inline-block;
vertical-align:middle;
}
or view jsfiddle Demo
Thank you
Don't add it as a class, in that div tag use this:
<div style="text-align:center, margin-left:auto, margin-right:auto>
and i'm not sure why this is in php tags, this won't work with html unless you're echoing it.
Either get rid of the php tags or at the beginning write echo" and at the end write ";
Either replace it with this:
<?php
echo"
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
";
?>
or just get rid of the <?php?> tags
Related
I have a problem , I would like to change just color of one icon but I can't put other class because icon font-awasome have a class.
I put em but it's not work. I want change last icon (color).
Can you help me ?
<div class="text">
<h4>Los Angeles</h4>
<p class="price">Nuit à partir de <strong>25€</strong></p>CC
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
I don't understand why you cannot add another CSS class, I don't see any reason not to do that.
But anyways other options are:
using an inline style tag:
<i class="fas fa-star" style="color: red;"></i>
or if you know the position, you know it's always the third element, you can use :nth-child().
This example will change the color of the third icon
.text i:nth-child(3) {
color: red;
}
Snippet:
.text .fas.fa-star {
color: black;
}
.text .fas.fa-star:nth-child(3) {
color: red;
}
<div class="text">
<span class="fas fa-star">1</span>
<span class="fas fa-star">2</span>
<span class="fas fa-star">3</span>
<span class="fas fa-star">4</span>
<span class="fas fa-star">5</span>
</div>
I tried but the problem is that I have a section with articles that contain the same composition and I want select icon with css3.
Yes, It works great for styling directly on html thank you.
I will like to do all my styles only in the css part.
First article exemple I want to select 2last icon, dans secondly article just last icon I can put div with class ?
<article>
<a href="#">
<div>
<img
class="image"
src="Public/Images/hebergements/4_small/HotelLesmouettes.jpg"
alt="Hôtel les mouettes"
/>
</div>
<div class="text">
<h4>Hôtel Les mouettes</h4>
<p class="price">Nuit à partir de 76<strong>€</strong></p>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</a>
</article>
</div>
<div class="Lodging-article">
<article>
<a href="#"
>
<div>
<img
class="image"
src="Public/Images/hebergements/4_small/Hoteldelamer.jpg"
alt="Hôtel de la mer"
/>
</div>
<div class="text">
<h4>Hôtel de la mer</h4>
<p class="price">Nuit à partir de 46<strong>€</strong></p>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star" ></i>
</div>
</a>
</article>
I am trying to get two fontawesome icons caret up and caret down to stack on stop of each other without hiding one and showing the other? Any suggestions would be greatly appreciated.
Here is a plucker with Bootstrap and fontawesome: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
Another way of doing this is with .fa-stack and a bit of css and html like this:
Remove .pull-left from your <i>
Put a <span class="fa fa-stack"></span> around each pair
.fa-stack {
text-align: center;
}
.fa-stack .fa-caret-down {
position: absolute;
bottom: 0;
}
.fa-stack .fa-caret-up {
position: absolute;
top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-down" aria-hidden="true"></i>
<i class="fa fa-caret-up" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-up" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-up" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
You can achieve this using bootstrap grid system--
Working Example
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link data-require="fontawesome#4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="col-md-6 col-xs-12">
<div class="pull-left row">
<div class="col-md-1 col-xs-1">
<div class="row">
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
</div>
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-md-8 col-xs-8">
<span style="padding-right: 8px">Worker</span>
</div>
</div>
<div class="pull-left row">
<div class="col-md-1 col-xs-1">
<div class="row">
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
</div>
<div class="col-md-12 col-xs-1">
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-md-8 col-xs-8">
<span style="padding-right: 8px">Entitelment</span>
</div>
</div>
<div class="pull-left row">
<div class="col-md-1 col-xs-1">
<div class="row">
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
</div>
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-md-8 col-xs-8">
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
</div>
</body>
</html>
It's an old question but just in case someone is still looking for it, now Font Awesome has icon for it. Is is fa-sort: https://fontawesome.com/v4.7/icon/sort
Here's a solution that uses flexbox:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link data-require="fontawesome#4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<div class='icon-container'>
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<div class='icon-container'>
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<div class='icon-container'>
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
</body>
</html>
CSS:
.icon-container {
display: flex;
flex-direction: column
}
.pull-left {
display: flex;
}
span { padding-top: 4px; }
new plunk
You can simply wrap each <i> in a div
Since divs always take the whole width and start on a new line, this will automatically put them on top of eachother
You can then use css to style as you need
<div>
<div>
<i class="fa fa-caret-up"/>
</div>
<div>
<i class="fa fa-caret-down"/>
</div>
</div>
I'm trying to close the gaps/margins between the social icons and have it centered under the text.
Jumbotron
Here is the code:
div class="jumbotron"><!-- Jumbotron -->
<div class="container1">
<p>A blog to explore, learn, and share Electro Funk, Soul, & Hip Hop Music</p>
<div id="social"><!-- Social Icons -->
<div id="twitter" class="col-md-4">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram" class="col-md-4">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud" class="col-md-4">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
</div>
It would probably be better to not use separate columns for each icon and instead use one column surrounding them all:
<div id="social" class="col-md-12 text-center"><!-- Social Icons -->
<div id="twitter">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
I want when user hover over Egipat that price is also hovered. Is that possible only with CSS or I need to use JQuery?
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5>
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5>
</div>
</div>
No, its not possible you can't go to parents in css, you can only go to next or to child elements
only if you check the hover of the first div in your html code
col-sm-10:hover > div > h5{
/*do something*/
}
As there is no parent selector in CSS, you can hover the parent itself + using adjacent sibling selectors:
.tabela:hover, /* "Egipat" container */
.tabela:hover + div + div /* "price" container */
{
color: red;
}
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5>
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5>
</div>
</div>
You can achieve this using the general sibling selector ~; You can read more about it here :
.tabela:hover {
background-color: #ccc;
}
.tabela:hover ~ .tabela3 {
background-color: #ccc;
}
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5><--hover
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5><--hover
</div>
</div>
This gives you more flexibility than the adjacent sibling selector, since the ordering of the elements doesn't matter as much. You could stick another element after the tabela2 div, and still have it work.
How can I have stacked icons and apply fixed width to both icons (or to the stack itself)?
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</p>
</div>
The above example does not result in a fixed width icon. Adding fa-fw to the span class does not resolve the issue. Thoughts?
Seems that a newer version of Font Awesome fixes this issue. I am using v4.4 below.
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<br>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
In order for the rest of the icons in the list-group to appear with the same fixed width they have to be stacked behind an empty icon.
I did not test it but what if you try :
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop" style="font-size:20px"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse" style="font-size:20px"></i>
</span> Some text
</p>
</div>
... and adjust the values to fit the width attempted.
If it works, you could overwrite the original styles .fa-stop, .fa-exclamation ... directly in your CSS stylesheet. Maybe you will have to use !important hack.