i have a class "event_area_table_termin" that has a border. And in the class i have content, if the content goes into the deep so my border class do it not automatically. I give the class a fixed height but this is not my solution what i need.
Here is my screeny problem:
And i want this solution:
Here my HTML code:
<div class="row">
<div class="twelve columns event_margin_zero">
<div class="event_area_table">
<div class="event_list_icon">
<i class="fa fa-chevron-down fa-lg" style="margin-left:" 5px;="" margin-top:="" 7px;"=""></i>
</div>
<div class="eight columns">
<h3><a href="#">
Abendmarkt Osnabrueck - Osnabrück - 49076 </a></h3>
<i class="fa fa-map-marker fa-lg" style="margin-right: 5px;"></i>
49076 Osnabrück - Albrechtstraße 15 </div>
<div class="threeb columns">
<div class="event_area_table_icon">
<!--
<i class="fa fa-pencil 2x" style="padding-left: 3px;"></i>
<i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i>
-->
</div>
</div>
</div>
<div class="event_area_table_termin">
<div class="twelve columns">
<h3>Terminübersicht</h3>
<table>
<thead>
<tr>
<th>Titel</th>
<th>Startdatum</th>
<th>Enddatum</th>
<th>Wiederholung</th>
<th>Art</th>
<th>Aktion</th>
</tr>
</thead>
<tbody>
<tr><td>Abendmarkt Osnabrueck</td><td>11.04.2014</td><td>18.04.2014</td><td>Täglich</td><td>Floh-, Trödel- & Jahrmarkt</td><td><i class="fa fa-tint 2x" style="padding-left: 3px;"></i>
<i class="fa fa-pencil 2x" style="padding-left: 3px;"></i>
<i class="fa fa-eye 2x" style="padding-left: 3px;"></i>
<i class="fa fa-copy 2x" style="padding-left: 3px;"></i>
<i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></td></tr><tr><td>Frühlingmarkt Osnabrück</td><td>19.04.2014</td><td>22.04.2014</td><td>Täglich</td><td>Floh-, Trödel- & Jahrmarkt</td><td><i class="fa fa-tint 2x" style="padding-left: 3px;"></i>
<i class="fa fa-pencil 2x" style="padding-left: 3px;"></i>
<i class="fa fa-eye 2x" style="padding-left: 3px;"></i>
<i class="fa fa-copy 2x" style="padding-left: 3px;"></i>
<i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></td></tr><tr><td>Herbstmarkt Osnabrück</td><td>18.04.2014</td><td>24.04.2014</td><td>Täglich</td><td>Floh-, Trödel- & Jahrmarkt</td><td><i class="fa fa-tint 2x" style="padding-left: 3px;"></i>
<i class="fa fa-pencil 2x" style="padding-left: 3px;"></i>
<i class="fa fa-eye 2x" style="padding-left: 3px;"></i>
<i class="fa fa-copy 2x" style="padding-left: 3px;"></i>
<i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></td></tr> </tbody>
</table>
<a href="/marktadresse/veranstaltungstermine-erstellen.html?area=Abendmarkt+Osnabrueck&area_id=OnRD4sBrvHZgAy4rK4" class="btn btn_green right" style="text-decoration: none"><i class="fa fa-plus fa-lg" style="margin-right: 10px;
position: relative;
top: -1px;"></i>neuen Termin für Abendmarkt Osnabrueck erstellen</a> <br><br>
<i class="fa fa-chevron-right fa-lg" style="margin-right: 5px;"></i>Alle Veranstaltungsorte
</div>
</div>
</div>
<div class="clear"></div>
</div>
JSFIDDLE DEMO
Hope someone can help me.
add this code in your css page...
.event_area_table_termin { border: 1px solid #ccc; height: 100%; }
Output Fiddle
Add this to the class event_area_table_termin
overflow: auto;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
DEMO
Related
Happy morning everyone,
I don't manage to target .fa-caret-down or up (inside a i and span) with the a[aria-expanded=true] which share the same div parent, do you know how to do it ?
I try with the selector ~, or to move the fa-caret-up (and succeed), but you are really good here, so here a light version of the code if you can find a solution.
Thanks !
<style>
a[aria-expanded="true"] .fa-caret-up {
display: none;
}
a[aria-expanded="false"] .fa-caret-down {
display: none;
}
</style>
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<h4 class="text-center">eCampus</h4>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span class="flex-grow-1 mr-5"><i class="fa fa-chevron-right pr-2"></i>Université Paris-Saclay</span>
</a>
<span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></span>
</div>
<div id="footer_ups" class="collapse pl-3" aria-labelledby="Établissements de l'Université Paris-Saclay">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> UPSaclay</li>
<li><i class="fa fa-angle-right pr-2"></i> UEVE</li>
<li><i class="fa fa-angle-right pr-2"></i> UVSQ</li>
<li><i class="fa fa-angle-right pr-2"></i> Centrale Supéle</li>
<li><i class="fa fa-angle-right pr-2"></i> École Normale Supérieure</li>
<li><i class="fa fa-angle-right pr-2"></i> Institut d'Optique</li>
<li><i class="fa fa-angle-right pr-2"></i> AgroParisTech</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="text-nowrap pr-5" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
<span><i class="fa fa-chevron-right pr-2"></i>Institut Polytechnique de Paris</span>
</a>
<span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
</div>
<div id="footer_ipp" class="collapse pl-3" aria-labelledby="Établissements de l'Institut Polytechnique de Paris">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> ENSTA</li>
<li><i class="fa fa-angle-right pr-2"></i> INSTN</li>
<li><i class="fa fa-angle-right pr-2"></i> Télécom Paris</li>
<li><i class="fa fa-angle-right pr-2"></i> Télécom Evolution</li>
</ul>
</div>
<br />
<i class="fa fa-chevron-right pr-2"></i>Alliance EUGLOH pour les étudiants
</div>
<div class="col-lg-4 col-md-6 col-12 pb-4">
<h4 class="text-center">Aide et Informations légales</h4>
<ul class="list-unstyled">
<li><i class="fa fa-chevron-right pr-2"></i>Problèmes de connexion</li>
<li><i class="fa fa-chevron-right pr-2"></i>Aide et accessibilité</li>
<li> <li>
<li><i class="fa fa-chevron-right pr-2"></i>Conditions générales d'utilisation</li>
<li><i class="fa fa-chevron-right pr-2"></i>Crédits</li>
<li><i class="fa fa-chevron-right pr-2"></i>Mentions légales</li>
<li><i class="fa fa-chevron-right pr-2"></i>Politique de confidentialité</li>
<li> <li>
<li><i class="fa fa-chevron-right pr-2"></i>Obtenir l'app mobile</li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center">
<h4 class="text-center">Suivez-nous</h4>
<i class="fa fa-facebook-square fa-3x mr-3"></i>
<i class="fa fa-twitter-square fa-3x mr-3"></i>
<i class="fa fa-linkedin-square fa-3x mr-3"></i>
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
</div>
If you want to make caret up and down animation you can use little JS
const caret = document.querySelector('.caret');
caret.addEventListener('click', (e) => {
e.preventDefault();
caret.classList.toggle('collapsed');
if (caret.classList.contains('collapsed')) {
caret.setAttribute("aria-expanded", "true");
} else {
caret.setAttribute("aria-expanded", "false");
}
console.log(caret.getAttribute('aria-expanded'))
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.caret {
width: 70px;
height: 70px;
display: grid;
place-items: center;
border-radius: 0.25rem;
border: 1px solid #e5e5e5;
}
.caret svg {
width: 64px;
height: 64px;
transition: transform 250ms ease;
}
.caret.collapsed svg {
transform: rotate(180deg);
}
<a href="#" class="caret" aria-expanded="false">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="m11.998 17 7-8h-14z"></path>
</svg>
</a>
You have to select the sibling first and then the i tags if you want to use the general sibling selector (~). For example:
a[aria-expanded="true"] ~ span .fa-caret-up {...}
Working example:
a[aria-expanded=true] ~ span .fa-caret-up {
display: none;
}
a[aria-expanded=false] ~ span .fa-caret-down {
display: none;
}
<script src="https://kit.fontawesome.com/79efab5353.js" crossorigin="anonymous"></script>
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<h4 class="text-center">Moodle</h4>
<div class="d-flex justify-content-between align-items-center mr-5">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span class="flex-grow-1"><i class="fa fa-chevron-right pr-2"></i>Uni</span>
</a>
<span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></span>
</div>
<div id="footer_ups" class="collapse pl-3" aria-labelledby="Établissements">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> Website</li>
</ul>
</div>
</div>
</div>
</div>
I'm trying to recreate the dragon balls from Dragon Ball. I need to distribute the stars evenly across the center of the "ball" using flexbox and I need to center the balls to the parent container. The issue is that when the ball with 4 or more stars is next to a ball with fewer stars, the 4-star ball shifts up and misaligns compared to the previous ball. The stars must be centered vertically and horizontally inside the ball. The balls must be aligned from the top no matter what order they have inside the parent div.
.circulo_iconos{
width: 8em;
height: 8em;
border: 1pt solid black;
text-align: center;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.circulo_iconos .fa{
font-size: 2em;
}
.circulo_iconos .fa.fa-star{
color: yellow;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="tiene_circulos">
<div class="circulo_iconos" data-number="1">
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="2">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="3">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="4">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<br />
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="5">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="6">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
</div>
I only made the parent container flex with flex-wrap and think that pretty much solved it. Did it?
/* * * I only added this * * */
#tiene_circulos {
display:flex;
flex-wrap:wrap;
}
.circulo_iconos{
width: 9em;
height: 9em;
border: 1pt solid black;
text-align: center;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
/*But it would look even better with those 2 lines below I think ^^*/
/* padding: 1em;
margin:1em;*/
}
.circulo_iconos .fa{
font-size: 2em;
}
.circulo_iconos .fa.fa-star{
color: yellow;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="tiene_circulos">
<div class="circulo_iconos" data-number="1">
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="2">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="3">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="4">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<br />
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="5">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
<div class="circulo_iconos" data-number="6">
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</div>
</div>
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
I've tried a few variations of CSS star ratings via different methods, and am trying to implement the following via FontAwesome rather than using a sprite. I want to be able to include half stars ideally, but this is where the example below is failing. This is what I've tried so far. I can't get the half / partial star to work correctly here. Any pointers greatly appreciated!
.score {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.score-wrap {
display: inline-block;
position: relative;
overflow: hidden;
height: 19px;
}
.score .stars-active {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
}
.score .stars-inactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:50%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:100%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:0%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
The overflow:hidden needs to be on 'stars-active' (the sized element) instead of 'score-wrap' (which never overflows.) You can use white-space: nowrap to prevent the stars from wrapping to the next line within the hidden-overflow container.
.score {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.score-wrap {
display: inline-block;
position: relative;
height: 19px;
}
.score .stars-active {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.score .stars-inactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
/* overflow: hidden; */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:50%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:100%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:0%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
I found this solution by Paales here: https://github.com/FortAwesome/Font-Awesome/issues/717
I think it's an elegant solution. It looks comparable to your code because the full stars overlap the empty stars and by using overflow: hidden and position: absolute. Now you can set the width of the full stars and show partly filled stars. If you want to show half stars you could change the width of the absolute positioned element with 10% increments.
.rating-box {
position:relative;
vertical-align: middle;
font-size: 3em;
font-family: FontAwesome;
display:inline-block;
color: #F68127;
}
.rating-box:before{
content: "\f006 \f006 \f006 \f006 \f006";
}
.rating-box .rating {
position: absolute;
left:0;
top:0;
white-space:nowrap;
overflow:hidden;
color: #F68127;
}
.rating-box .rating:before {
content: "\f005 \f005 \f005 \f005 \f005";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="rating-box">
<div class="rating" style="width:30%;"></div>
</div>
PS: Daniel Beck already gave you the answer about the mistake you made regarding white-space: no-wrap, so I suggest accepting that answer. I just wanted to share this solution because I think it is a very nice alternate approach.
below is the Font Awesome 5 version of #Rob's answer above:
We can use font-family: "Font Awesome 5 Free"; font-weight: xxx; to switch between solid and outline
You can play around with the code at the following link.
/* rating box with fontawesome 5 inspired from - https://stackoverflow.com/a/49343426/6908282*/
.rating-box {
position: relative;
vertical-align: middle;
font-size: 3em; /* comment/edit this to change size */
font-family: FontAwesome;
display: inline-block;
color: #F68127;
}
.rating-box:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f005 \f005 \f005 \f005 \f005";
}
.rating-box .rating {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #F68127;
}
.rating-box .rating:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005 \f005 \f005 \f005 \f005";
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<div class="rating-box">
<div class="rating" style="width:52%;"></div>
</div>
I find myself doing with two sets of stars styles solid and regular. Solid set declared first to have higher z-index and overlapped Regular sets of stars controlled by hidden, nowrap and width.
.stars-rating {
position: relative;
display: inline-block;
}
.stars-rating .stars-score {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 20%;
white-space: nowrap;
}
<div class="stars-rating">
<div class="stars-score" style="width: 20%">
<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>
<div class="stars-scale">
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
For future reference, FontAwesome have added half stars to their arsenal. Make sure to include <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> in the <head> section of your page, and then the following will give you the basic structure.
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-half" aria-hidden="true"></i>
</span>
</span>
</div>
If you want the stars to appear bigger, edit fa fa-star to be fa fa-star 3x where 3x indicates the size, so 3x, 4x, 5x etc. If you would like a different style of star, use fa-star-o. The default colour is black, so if you would like to change the colour you can either edit it via CSS or add the colour to the class, i.e class="fa-star-o bg-light"
This is very nice, thanks for sharing.
I made the same tweak as Faraz, switching to
<i class="fas fa-star" aria-hidden="true"></i>
in the stars-active span, and
<i class="far fa-star" aria-hidden="true"></i>
in stars-inactive,
as it bothered me that stars above the rating % didn't show.
★★★⯪☆
Just use Unicode characters and then use https://www.babelstone.co.uk/Fonts/Shapes.html font as it has ⯪ (STAR WITH LEFT HALF BLACK)
★★★⯪☆
Given the characters (glyphs) above, lets say that ⯪ is rendered as ▯ or some other character that denotes that the glyph is missing from the font. The way you fix this is that you copy ⯪ (missing glyph) and then
in google type
Unicode ⯪
(you paste the glyph you are looking for).
From the results you find https://unicode-table.com/en/2BEA/ that says that the character is called "Star with Left Half Black" and that the code is U+2BEA.
Next you take the 2BEA portion of U+2BEA and paste it into the URL below between /char/ and /fontsupport.htm
https://www.fileformat.info/info/unicode/char/2BEA/fontsupport.htm
The URL for your missing character lists all the fonts that contain that character. Now you can click "view" next to each font listed and find the one you like best.
If you find multiple that you like equally well, you can download all of them and then pick the smallest one.
You want to have a .ttf, .woff, and .woff2 version of the font you choose and then you can use it in CSS as follows:
#font-face {
font-family: 'BabelStoneShapes';
src: url('/fonts/BabelStoneShapes.woff2')format('woff2'), /* Smallest file, if your browser can use this, it will stop here and not download the rest */
url('/fonts/BabelStoneShapes.woff')format('woff'), /* A larger file, if your browser does not understand woff2 */
url('/fonts/BabelStoneShapes.ttf')format('truetype');/* The largest of the three */
font-weight: normal;
font-style: normal;
font-display: block;
}
div.rating {
font-family: BabelStoneShapes;
}
and then use it in HTML as follows:
<div class="rating">★★★⯪☆</div>
Obviously, if Stack Overflow wanted to, they could make their website support virtually all Unicode fonts by using Symbola and updating it each time a new version came out. But they probably never will so in this "Answer" you won't see the half star, but if you follow the example, you will.
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>