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

Тема в разделе "Верстка", создана пользователем Surprise, 14 фев 2018.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Surprise

    Surprise

    Регистр.:
    13 мар 2012
    Сообщения:
    393
    Симпатии:
    203
    Помогите реализовать замену текста на иконку в мобильной версии сайта. Как прописать условие?
    Это 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>
    
     
  2. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    94
    Симпатии:
    37
    я бы выводил и текст и иконку, и через 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}
    }
     
    st1000, Surprise и inturned нравится это.
  3. Mr.Varenik

    Mr.Varenik

    Регистр.:
    5 янв 2018
    Сообщения:
    287
    Симпатии:
    47
    Как показать:

    Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код внутри тэга-контейнера <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>
     
    Surprise нравится это.
  4. Bo6eR

    Bo6eR Создатель

    Регистр.:
    7 июл 2017
    Сообщения:
    12
    Симпатии:
    5
    Небольшой пример как изменить текст на иконку 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>
     
  5. xLuckyx

    xLuckyx Создатель

    Регистр.:
    13 ноя 2008
    Сообщения:
    32
    Симпатии:
    10
    Surprise, https://jsfiddle.net/9e6wn51n/2/ - в зависимости от ширина дисплея устройства элементу с текстом присваивается определенное свойство display. Здесь важно еще добавить метатег viewport в <head>, который позволяет правильно интерпретировать свойство min-width и max-width.
     
    Последнее редактирование: 10 май 2018
    Surprise нравится это.