Add Labels to the Icons - Aaron Meyers

Add Labels to the Icons

Many website viewers often struggle with the meaning of icons on the page if there is no text describing them. For example, an arrow with a line under it means what? It means "Click here to download the photo". Or what does a box with an arrow come out of it mean? Oh, it means "Share". To add text to your icons, use the following code. If you feel the font for the icons is too large, change font-size: 100% to something smaller. I used 95% on my page. Update 2014-03-17: SM released some changes to the lightbox and editing titles and captions that slightly broke the code for adding the word "Tools" to the wrench. I've updated the code accordingly below to change ".sm-button.sm-button-image-edit:after" to ".sm-button.sm-button-image-tools:after"

 /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }

  /* Add the word "Info" after the info button */
  .sm-button.sm-button-image-info:after {
    content: " Info" !important;
    font-size: 95%;
  }

  /* Add the word "Tools" after the tools button */
  .sm-button.sm-button-image-tools:after {
    content: " Tools" !important;
    font-size: 95%;
  }

  /* Add the word "Like" after the like button */
  .sm-button.sm-button-image-like:after {
    content: " Like" !important;
    font-size: 95%;
  }

  /* Add the word "Share" after the share button */
  .sm-gallery .sm-button.sm-button-image-share:after {
    content: " Share" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Comment" after the Comments button */
  .sm-lightbox-icons .sm-button.sm-button-image-comment:after {
    content: " Comment" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Share" after the Share button */
  .sm-lightbox-icons .sm-button.sm-button-image-share:after {
    content: " Share" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Sizes" after the Sizes button */
  .sm-lightbox-icons .sm-button.sm-button-image-sizes:after {
    content: " Sizes" !important;
    font-size: 95%;
  }
I found that on small screens the text would often cause the page to no longer fit on smaller screens or on tablets. I wanted to make the text only appear if the screen was large enough. I used the code to "Change Features for Mobile or Tablet Browsers" to make this happen:
/* For large screens only  */
@media only screen and (min-width: 1200px) {
  /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }

  /* Add the word "Info" after the info button */
  .sm-button.sm-button-image-info:after {
    content: " Info" !important;
    font-size: 95%;
  }

  /* Add the word "Tools" after the tools button */
  .sm-button.sm-button-image-tools:after {
    content: " Tools" !important;
    font-size: 95%;
  }

  /* Add the word "Like" after the like button */
  .sm-button.sm-button-image-like:after {
    content: " Like" !important;
    font-size: 95%;
  }

  /* Add the word "Share" after the share button */
  .sm-gallery .sm-button.sm-button-image-share:after {
    content: " Share" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Comment" after the Comments button */
  .sm-lightbox-icons .sm-button.sm-button-image-comment:after {
    content: " Comment" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Share" after the Share button */
  .sm-lightbox-icons .sm-button.sm-button-image-share:after {
    content: " Share" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Sizes" after the Sizes button */
  .sm-lightbox-icons .sm-button.sm-button-image-sizes:after {
    content: " Sizes" !important;
    font-size: 95%;
  }
}

Comments

Powered by SmugMug Log In