Monaen's WikiImages With Markup 2017-03-26

Tips

  • Add icon using icon font: Useful
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // first: add the import into the css file
    @import url(http://weloveiconfonts.com/api/?family=zocial);

    // Then: use 'before' selector to configure
    [class*="zocial-"]:before {
        display: inline-block;
        font-family: 'zocial', sans-serif;
        text-shadow: 3px 3px 3px #aaa
        width: 20vw;
    }

Resources

Text problems

A comparison of different types of text

CSS Techniques

CSS Background Images

Symbol characters

Unicode Treble Clef

  • Here’s a big list of unicode characters

    1
    2
    // If you want to use unicode, add a meta tag in <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">

  • More on meta tag charsets
    Having trouble seeing unicode characters? Unfortunately, not all browsers include the fonts needed to see all unicode characters by default. This site will help you determine what characters your browser can render and here’s some advice for enabling unicode with Chrome on Windows.

Icon Fonts

  • Zocial
  • Font Awesome
  • We Love Icon Fonts!
  • Icon fonts on CSS-Tricks
  • ARIA: Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

Inlining Images With SVG And Data URIs

Examples:

Inline images can greatly reduce the number of file requests, but if the image will be reused many times, an external file probably makes more sense. Data URIs provide a way to include a file such as an image inline as a base64 encoded string using the following format:

1
<img src="data:image/svg+xml;base64,[data]">

▲