Bootstrap Snippet Phone list with images using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="deck-company-phone">
    <ul>
        <li>
            <span class="icon-phone icon-phone-mts"></span>  
            <a href="tel:+375291234567" title="MTC">+375 (33) 1234567</a>
        </li>
        <li>
            <span class="icon-phone icon-phone-velcom"></span>
            <a href="tel:+375291234567" title="Velcom">+375 (29) 1234567</a>
        </li>
    </ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.deck-company-phone {
    margin-top: 10px;
    display: inline-block;
}
.deck-company-phone ul{
    list-style:none;
    padding-left:0;
}
.deck-company-phone span {
    margin-right: 5px;
}
.icon-phone {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 2em;
    line-height: 1.2em;
}
.icon-phone:before {
    content: "\00a0";
}
.icon-phone-mts {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c2/MTS_logo.svg);
}
.icon-phone-velcom {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/9e/Velcom_Logo.svg);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Phone list with images"
Bootstrap 4.1.1 Snippet by diezz

Related: See More

Questions / Comments:

"Phone list with images" Bootstrap 4.1.1 Snippet by diezz

Related: See More

Questions / Comments:

"Phone list with images"
Bootstrap 4.1.1 Snippet by diezz