IconMoon

by Gulam Jilani

HTML

<script src="http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.0b3775ea.woff2?"></script>
<div class="body-container">
        <div id="amenity" class="info-card">
            <div class="amenities-wrap js-list-wrap" data-module="divExpansion">                
                <h2 title="Amenities">Amenities</h2>
                <div class="m-scroll-wrap">
                    <div class="icons-list js-list js-mobscroll" data-type="list">
                        <div class="listitem  js-moblist-item">
                            <div class="icon-wrap">
                                <span class="icon-lift"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span>
                            </div>
                            <div class="txt" itemprop="amenityFeature">Lift Available</div>
                        </div>
                        <div class="listitem  js-moblist-item">
                            <div class="icon-wrap">
                                <span class="icon-parking"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span></span>
                            </div>
                            <div class="txt" itemprop="amenityFeature">Car Parking</div>
                        </div>
                        <div class="listitem  js-moblist-item">
                            <div class="icon-wrap">
                                <span class="icon-power"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>
                            </div>
                            <div class="txt" itemprop="amenityFeature">Power Backup</div>
                        </div>
                        <div class="listitem  js-moblist-item">
                   ...

CSS

@font-face {
            font-family: 'icomoon';
            src: url('http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.61c47cc5.eot?');
            src: url('http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.61c47cc5.eot?#iefix') format('embedded-opentype'), url('http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.0b3775ea.woff2?') format('woff2'), url('http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.676845f3.woff?') format('woff'), url('http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.5c813fa8.ttf?') format('truetype'), url('http://d1c42d2bmccy49.cloudfront.net/fonts/icomoon.c47f5696.svg?#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
        }

.fc,
.fc:focus {
    box-shadow: none
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-whatsapp:before {
    content: "\f232"
}

.icon-mail:before {
    content: "\e002"
}

.icon-link:before {
    content: "\e005"
}

.icon-share:before {
    content: "\e081"
}

.icon-arrow-down:before {
    content: "\e9fd"
}

.icon-arrow-left:before {
    content: "\e9fe"
}

.icon-arrow-right:before {
    content: "\e9ff"
}

.icon-arrow-up:before {
    content: "\ea00"
}

.icon-children .path1:before {
    content: "\ebd1";
    color: #5b5c5c
}

.icon-children .path2:before {
    content: "\ebd3";
    margin-left: -1em;
    color: #5b5c5c
}

.icon-children .path3:before {
    content: "\ebd7";
    margin-left: -1em;
    color: #5b5c5c
}

.icon-children .path4:before {
    content: "\ebd8";
    margin-left: -1em;
    color: #5b5c5c
}

.icon-children .path5:before {
    content: "\ebd9";
    margin-left: -1em;
    color: #5b5c5c
}

.icon-children .path6:before {
    content: "\ebda";
    margin-left:...