Change text to icon - responsive

2 posts, 0 answers
  1. Ezequiel
    Ezequiel avatar
    42 posts
    Member since:
    Oct 2011

    Posted 15 Jun 2018 Link to this post

    I have some buttons with icons and text and some only with text.

    How the best way to make the button have only icon in a responsive layout?

    Is there some settings I can do it or I need to do it in my scripts?




  2. Neli
    Neli avatar
    221 posts

    Posted 19 Jun 2018 Link to this post

    Hi Ezequiel,

    In order to hide the text of a button on different screen size, you could use media queries. For example you could wrap the text of the button in a span with specific class. Then in your styles, you could hide the element depending on the screen size.
    <button id="button" type="button"><span class="hideText">Cancel</span></button>

    @media screen and (max-width: 800px) {
      .hideText {
        display: none

    Here is a Dojo example, where the text of the button is visible or hidden depending on the screen size.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top