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.

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

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

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

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

  /* Allow lightbox icon buttons to expand to our custom content width */
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
      width: auto;
  }
  
  /* Shrink the padding between lightbox icon elements */
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button-size-small.sm-button-square {
    padding: 8px 5px 8px 5px;
  }
	
  /* Give the icons some space between them and our custom text */
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-icon,
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-fonticon {
      margin-right: 2px;
  }

  /* 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%;
    padding-left: 3px;
  }

  /* 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%;
    padding-left: 2px;

  }

  /* 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%;
    padding-left: 3px;
  }
  
  /* Hide the "Sizes" Button from normal users */
  body:not(.sm-user-owner) .sm-button-image-sizes {
    display: none !important;
  }
  
  /* Shrink the width of the Lightbox buy button */
  .sm-lightbox .yui3-widget-ft .sm-lightbox-tools .sm-button.sm-lightbox-buy-button {
    min-width: 80px;
    padding-left: 5px;
    padding-right: 5px;
  }

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%;
    padding-left: 2px;
  }

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

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

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

  /* Allow lightbox icon buttons to expand to our custom content width */
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
      width: auto;
  }
  
  /* Shrink the padding between lightbox icon elements */
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button-size-small.sm-button-square {
    padding: 8px 5px 8px 5px;
  }
	
  /* Give the icons some space between them and our custom text */
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-icon,
  .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-fonticon {
      margin-right: 2px;
  }

  /* 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%;
    padding-left: 3px;
  }

  /* 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%;
    padding-left: 2px;

  }

  /* 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%;
    padding-left: 3px;
  }
  
  /* Hide the "Sizes" Button from normal users */
  body:not(.sm-user-owner) .sm-button-image-sizes {
    display: none !important;
  }
  
  /* Shrink the width of the Lightbox buy button */
  .sm-lightbox .yui3-widget-ft .sm-lightbox-tools .sm-button.sm-lightbox-buy-button {
    min-width: 80px;
    padding-left: 5px;
    padding-right: 5px;
  }
}