Hiding half an icon on a Card

Question

Hiding half an icon on a Card

Navigation

#1 by (3 votes)
#2 by (2 votes)

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><scriptsrc="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><divclass="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 leave the icon leaning on the right corner of the card, and the rest of the icon to be invisible.

html css bootstrap

asked by anonymous 11.11.2016 / 13:07

2 answers

2

Very simple to use awesome font, I use a lot of it do graph online the tool morris.js and there is ready calls Microsoft PowerBI, well let's go below example below:

Awesome Font page of sample working code: link

Need to load CDN and CSS only because of fonts for web: link

<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><scriptsrc="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><divclass="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>

11.11.2016 / 19:41

Problem with Struct and Function in C Retrieve typed URL

score 3 · Accepted Answer

Here's a base, now just adjusting 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><scriptsrc="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><divclass="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>