Иконка вместо текста в мобильной версии

Surprise

Surprise

Мой дом здесь!
Регистрация
12 Мар 2012
Сообщения
430
Реакции
210
Помогите реализовать замену текста на иконку в мобильной версии сайта. Как прописать условие?
Это CMS OC 2.3
tpl вывода текстового, в декстоп версии.
Код: 
<div  class="t-dd">
<a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>"><i class="<?php echo $myaccount_icon; ?>"> <?php echo $text_account; ?> </a>
</div>
 
я бы выводил и текст и иконку, и через media менял бы параметр display:block/display:none в соответствующих блоках
что то вроде
Код: 
@media screen and (max-width: 719px){
.ico{display:block}
.label{display:none}
}
@media screen and (min-width: 720px){
.ico{display:none}
.label{display:block}
}
 
Как показать:

Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код внутри тэга-контейнера <body> в том месте, где этот контент должен отображаться

<div>
Здесь текст или изображение.
</div>

Для тэга <div> ниже прописан CSS-класс show-on-mobile. Все свойства этого класса пишутся в отдельном коде и добавляется перед </head> или в отдельный CSS-файл (во втором случае нужно использовать код без контейнера <style type="text/css>...</style>)

<style type="text/css">
.show-on-mobile { display: none; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .show-on-mobile { display: inline; }}
</style>

Как скрыть:

Чтобы спрятать определенный контент от пользователей мобильной версии страницы, вам нужно добавить в нужном месте контейнера <body> код, похожий на предыдущий:

<div>
Здесь текст или изображение.
</div>

Затем необходимо прописать стили CSS в контейнере <head> или в отдельном CSS-файле (без контейнера <style>:(

<style type="text/css">
.hide-on-mobile { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .hide-on-mobile { display: none; }}
</style>
 
Небольшой пример как изменить текст на иконку FontAwesome для мобильных устройств:

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://use.fontawesome.com/cfb85b953f.js"></script>
<style>
@media all and (max-width:1200px) {
.text_icon {
    display: inline-block;
    overflow: hidden;
    width: 32px;
    height: 32px;
    position: relative;
}
.text_icon::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: 'FontAwesome';
    content: '\f071';
    background: #cc0000;
    color: #fff;
    padding: 4px;
}
}
</style>
</head>

<body>
<br />
<center>
  <span class="text_icon">sample text</span>
</center>
</body>
</html>
 
Surprise, Для просмотра ссылки Войди или Зарегистрируйся - в зависимости от ширина дисплея устройства элементу с текстом присваивается определенное свойство display. Здесь важно еще добавить метатег viewport в <head>, который позволяет правильно интерпретировать свойство min-width и max-width.
 
Последнее редактирование:
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху