You might want to include a logo on the page but you also would like to use a text within a header tag for the sake of accessibility and also for gaining benifits from SEO, and ideally on the webpage you would like to show your logo and not text. In that scenario you can utilize this `.text-hide` class to replace an element’s text content with a background image, often logo.
-```html
-<h1 class="text-hide">Lorem ipsum dolor.</h1>
-```
+```html_example
+<a href="" class="text-hide">
+ <img src="assets/img/logos/zurb-logo.svg">
+ Zurb <!-- Logo Text -->
+</a>
+```
---
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>Foundation for Sites Testing</title>
+ <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+ <link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="row column">
+ <h2 class="m-t-40">Text Hide</h2>
+ <a href="" class="text-hide">
+ <img src="http://foundation.zurb.com/sites/docs/assets/img/logos/zurb-logo.svg">
+ Zurb
+ </a>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+ </body>
+</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
