How to show only half of bootstrap glyphicon with css


Tags: css,twitter-bootstrap,less,glyph

Problem :

I'd like to make a star rating for an item made with glyphicon-star, since it is not possible having glyphs with more than one color, would it be possible to display only half?

half starred

I'm using bootstrap and I'm working on its source with less.

cheers

    <p>
      <span class="view-stats">{$post.numviews|number_format:0} views</span>
      <span class="view-stars pull-right">
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color" ></span>
      </span>
      &nbsp;
    </p>

Thanks, here's the Less snippet

 .half {
    position:relative;

    >after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
    }
}

And here's how it renders



Solution :

demo - http://www.bootply.com/10XzUrAamb

changed left to 47% so that it adjusts with different font sizes

you can do something like this

.half {
    position:relative;
}
half:after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
}

    CSS Howto..

    How to toggle css media queries on and off

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How do I keep floated child divs from wrapping?

    How to create a CSS3 animation that resembles an image fill up effect?

    HTML CSS How to swap css attributes

    How do I align these pictures vertically?

    How to put a border on a triangle shape using css?

    How to improve the rendering of my HTML/CSS button?

    Symfony2 Form Type - how to set form CSS class as attribute?

    How to vertically align image in a td cell, without vertically-align

    How does one override the JQuery UI styles?

    How to manage css files the best way

    How to do onclick in CSS to do transition on image?

    How to set the container height automatically maintaining the ratio

    How to check css in unit test

    How do I interact with @font-face definitions using the Chrome debugger?

    How to reference a long class name with spaces in CSS?

    How to make header/body/footer 'popup' div with variable height body?

    How i can match multiple CSS selectors

    How can I make my numbered scale responsive to scrolling and clicking?

    Text overlay over image on hover. How to stop other divs from moving

    how to position subheader right under header [closed]

    How to reset CSS in inline? [closed]

    how to blur all list-items text except for (this) a:hover

    How to Vertical align text in div

    Using CSS how to change only the 2nd column of a table

    Ionic on Codepen: how to start a new pen and get Ionic support

    How do I position a div below an image with changing height?

    sidebar is under the openlayers map how to set css

    How to auto resize the parent node according to its children