0

Не получается настроить параметры для иконки, чтобы было как на картинке. Какие ей параметры нужно задать?

.footer-adress {
  float: left;
  font-size: 14px;
  padding-top: 22px;
  font-weight: lighter;
  color: #fff;
  width: 228px;
  height: 47px;
}

.fa-map-marker:before {
  display: inline;
}

.footer-adress span {
  font-weight: bold;
  display: block;
}

.footer-email {
  padding-top: 8px;
  font-size: 14px;
  font-weight: lighter;
  color: #fff;
}

.footer-email span {
  font-weight: bold;
  display: inline-block;
}
<div class="footer-adress">
  <i class="fa fa-map-marker" aria-hidden="true"></i><span>Адрес офиса:</span> Ярославская область р-н Заволжский, ул.3-я Тверицкая д.32
  <p class="footer-email"><span>E-mail:</span> info@sitename.ru</p>
</div>

введите сюда описание изображения

1
  • Можно вставить её через псевдоэлемент, затем в свойство content CSS-код данной иконки
    – Arthur
    5 апр 2018 в 20:19

3 ответа 3

1

немного меняем разметку и добавляем float: left + margin

.icon-wrap {
  float: left;
}
.adress {
  margin-left: 25px;
}
.footer-adress {
  float: left;
  font-size: 14px;
  padding-top: 22px;
  font-weight: lighter;
  //color: #fff;
  width: 228px;
  //height: 47px;
}

.fa-map-marker:before {
  display: inline;
}

.footer-adress span {
  font-weight: bold;
  display: block;
}

.footer-email {
  padding-top: 8px;
  font-size: 14px;
  font-weight: lighter;
  //color: #fff;
}

.footer-email span {
  font-weight: bold;
  display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="footer-adress">
  <div class="icon-wrap">
    <i class="fa fa-map-marker" aria-hidden="true"></i>
  </div>
  <div class="adress">
      <span>Адрес офиса:</span> Ярославская область р-н Заволжский, ул.3-я Тверицкая д.32
  <p class="footer-email"><span>E-mail:</span> info@sitename.ru</p>
  </div>

</div>

1

Ещё фидлл

:root{
    --font-family: Tahoma, sans-serif;
}
body {
	font-family: var(--font-family);
}
p {
	margin-top: unset;
}
.footer-adress {
	position: relative;
}
.footer-adress:before {
	position: absolute;
	top: 0px;
	left: 3px;
	font-size: 30px;
}
dl.adress {
	margin-top: unset;
	margin-bottom: unset;
	margin-left: 40px;
	font-family: var(--font-family);
}
dl.adress dt {
	font-weight: 700;
}
dl.adress dd {
	margin-left: unset;
	margin-top: 10px;
}
dl.adress p {
	margin-top: 10px;
	margin-bottom: unset;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="footer-adress fa fa-map-marker">
	<dl class="adress">
		<dt>Адрес офиса:</dt>
		<dd>Ярославская область р-н Заволжский, ул.3-я Тверицкая д.32
			<p class="footer-email"><span>E-mail:</span> info@sitename.ru</p>
		</dd>
	</dl>
</div>

1

Флексы

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
background:#222;
font-family:"Open Sans", sans-serif;
}
.footer-adress {
  float: left;
  font-size: 14px;
  padding-top: 22px;
  font-weight: lighter;
  display:flex;
  color: #fff;
  width: 228px;
  height: 47px;
}
.marker {
margin-right:10px;
}
.footer-adress span {
  font-weight: bold;
  display: block;
}

.footer-email {
  padding-top: 8px;
  font-size: 14px;
  font-weight: lighter;
  color: #fff;
}

.footer-email span {
  font-weight: bold;
  display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="footer-adress">
  <div class="marker">
  <i class="fa fa-map-marker" aria-hidden="true"></i>
  </div>
  <div class="desc">
  <span>Адрес офиса:</span> Ярославская область р-н Заволжский, ул.3-я Тверицкая д.32
  <p class="footer-email"><span>E-mail:</span> info@sitename.ru</p>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.