Hide half an icon on a Card

Asked

Viewed 296 times

1

I have this code (Bootstrap 4):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="form-inline">
    <div class="col-lg-3 col-md-6">
        <div class="card card-inverse card-primary text-xs-center">
            <div class="card-block">
                <blockquote class="card-blockquote">
                    <p><h3>12,345</h3></p>
                    <footer>Texto de Exemplo</footer>
                </blockquote>
            </div>
        </div>
    </div>
</div>

I would like to use a Fontawesome icon and let the icon lean against the right corner of the card, and the rest of the icon be invisible.

html css bootstrap

2 answers

3


Here is a base, now just adjust as you want to use, colors, sizes, positions, etc...

.icon-card {
    font-size: 102px;
    position: absolute;
    top: -17px;
    right: -1px;
    width: 41px;
    overflow: hidden;
    color: #000;
    pointer-events:none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="form-inline">
    <div class="col-lg-3 col-md-6">
        <div class="card card-inverse card-primary text-xs-center">
            <div class="card-block">
                <blockquote class="card-blockquote">
                    <p><h3>12,345</h3></p>
                    <div class="icon-card">
                        <i class="fa fa-google-plus"></i>
                    </div>  
                    <footer>Texto de Exemplo</footer>
                </blockquote>
            </div>
        </div>
    </div>
</div>

  • 2

    +1. I would include a pointer-events:none in the rule of .icon-card p/ not keep showing that text selection cursor while hovering over the icon.

  • Hum broken http://i.imgur.com/9SCTphI.png

  • Don’t I understand...??? @Kingrider

2

Very simple to use awesome font, I use a lot of it I do online graphics the tool Morris.js and there is ready calls Microsoft Powerbi, well let’s go below example:

Awesome Font page of sample working code: http://fontawesome.io/examples/

Need to load CDN and CSS only because fonts for web: https://www.bootstrapcdn.com/fontawesome/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="form-inline">
    <div class="col-lg-3 col-md-6">
        <div class="card card-inverse card-primary text-xs-center">
            <div class="card-block">
                <blockquote class="card-blockquote">
                    <p><h3>
                      <i class="fa fa-smile-o" aria-hidden="true"></i>&nbsp;
                      12,345</h3></p>
                    <footer>Texto de Exemplo</footer>
                </blockquote>
            </div>
        </div>
    </div>
</div>

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.