Задать вопрос
vagono
@vagono

Как вставить svg иконки вместо текста?

Добрый день! Понадобилось поставить иконки вместо текста.
Подскажите, как реализовать?

Красными кружками обведена места, где нужны иконки.

5cc2ee1d7ba05865215740.png
<section class="container">        
        <div class="price-table">
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="single-price price-one">
                        <div class="table-heading">
                            <p class="plan-name">Ноутбук</p>
                            <p class="plan-price"><span class="dollar-sign">от </span><span class="price">500</span><span class="month">рублей</span></p>
                        </div>
                        <ul>                            
                            <li>Замена термопасты <span>120</span></li>
                            <li>Consectetur adipiscing <span><i class="fa fa-times"></i></span></li>
                            <li>Nulla pellentesque <span><i class="fa fa-times"></i></span> </li>
                            <li> Integer quis risus <span><i class="fa fa-check"></i></span></li>
                            <li>Phasellus et metus <span><i class="fa fa-times"></i></span></li>
                            <li>Duis nec massa inter <span><i class="fa fa-check"></i></span></li>
                        </ul>
                        <a class="btn btn-buynow">Buy Now</a>
                    </div>
                </div>
				<div class="col-sm-6 col-md-3">
                    <div class="single-price price-four">
                        <div class="table-heading">
                            <p class="plan-name">Platinum Plan</p>
                            <p class="plan-price"><span class="dollar-sign">$</span><span class="price">29</span><span class="month">/ Month</span></p>
                        </div>
                        <ul>
                            <li>Lorem ipsum dolor <span><i class="fa fa-check"></i></span></li>
                            <li>Consectetur adipiscing <span><i class="fa fa-times"></i></span></li>
                            <li>Nulla pellentesque <span><i class="fa fa-times"></i></span> </li>
                            <li> Integer quis risus <span><i class="fa fa-check"></i></span></li>
                            <li>Phasellus et metus <span><i class="fa fa-times"></i></span></li>
                            <li>Duis nec massa inter <span><i class="fa fa-check"></i></span></li>
                        </ul>
                        <a class="btn btn-buynow">Buy Now</a>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="single-price price-three">
                        <div class="table-heading">
                            <p class="plan-name">Silver Plan</p>
                            <p class="plan-price"><span class="dollar-sign">$</span><span class="price">89</span><span class="month">/ Month</span></p>
                        </div>                        
                        <ul>
                            <li>Lorem ipsum dolor <span><i class="fa fa-check"></i></span></li>
                            <li>Consectetur adipiscing <span><i class="fa fa-times"></i></span></li>
                            <li>Nulla pellentesque <span><i class="fa fa-times"></i></span> </li>
                            <li> Integer quis risus <span><i class="fa fa-check"></i></span></li>
                            <li>Phasellus et metus <span><i class="fa fa-times"></i></span></li>
                            <li>Duis nec massa inter <span><i class="fa fa-check"></i></span></li>
                        </ul>
                        <a class="btn btn-buynow btn-hightlight">Buy Now</a>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="single-price price-one">
                        <div class="table-heading">
                            <p class="plan-name">Glod Plan</p>
                            <p class="plan-price"><span class="dollar-sign">$</span><span class="price">29</span><span class="month">/ Month</span></p>
                        </div>
                        <ul>
                            <li>Lorem ipsum dolor <span><i class="fa fa-check"></i></span></li>
                            <li>Consectetur adipiscing <span><i class="fa fa-times"></i></span></li>
                            <li>Nulla pellentesque <span><i class="fa fa-times"></i></span> </li>
                            <li> Integer quis risus <span><i class="fa fa-check"></i></span></li>
                            <li>Phasellus et metus <span><i class="fa fa-times"></i></span></li>
                            <li>Duis nec massa inter <span><i class="fa fa-check"></i></span></li>
                        </ul>
                        <a class="btn btn-buynow">Buy Now</a>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="single-price price-two">
                        <div class="table-heading">
                            <p class="plan-name">Platinum Plan</p>
                            <p class="plan-price"><span class="dollar-sign">$</span><span class="price">29</span><span class="month">/ Month</span></p>
                        </div>
                        <ul>
                            <li>Lorem ipsum dolor <span><i class="fa fa-check"></i></span></li>
                            <li>Consectetur adipiscing <span><i class="fa fa-times"></i></span></li>
                            <li>Nulla pellentesque <span><i class="fa fa-times"></i></span> </li>
                            <li> Integer quis risus <span><i class="fa fa-check"></i></span></li>
                            <li>Phasellus et metus <span><i class="fa fa-times"></i></span></li>
                            <li>Duis nec massa inter <span><i class="fa fa-check"></i></span></li>
                        </ul>
                        <a class="btn btn-buynow">Buy Now</a>
                    </div>
                </div>
            </div>
        </div><!--/#price-table-->
    </section>
  • Вопрос задан
  • 255 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 1
iamd503
@iamd503 Куратор тега CSS
Верстальщик
в блок с классом plan-price вставьте svg иконку и всё
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы