02-CSS basic and advanced -day11_2018-09-17-20-08-19

The contents of
the Fonts icon
css3 2d and 3d

Font icons
advantages 1 can make the same thing and the picture
2 is the essence of the text, so you can go to modify the color any size shadow. . . .
3 Information itself carries no small cut
4 supports almost all browsers, mobile devices essential medicine
use
inside the company's own design scene icon
1 UI font icon design renderings (SVG)
2 front-end staff to upload generate compatibility font package such as
https : //icomoon.io/

(Other sites: www.iconfont.cn www.fontello.com)
3 text font download package to a local
4 font package into the html page

How to add a new icon in the original font library

Methods: The original font library json file, rebuild the font, font download text (fonts folder unzip the file to be cut) package to a local

CSS3
2D inclined rotating pan and zoom deform
3d
telescopic arrangement

@font-face {  /* µçÄÔÖÐÃ»ÓÐµÄ×ÖÌå£¬ÎÒÃÇÐèÒªÉùÃ÷ */
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

01 font icon .html

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > the Document </ title > 
    < style type = "text / CSS" > 
        @ font-face {   / * computer font not, we need to declare * / 
          font-Family : 'icomoon' ; 
          src :   url ( 'fonts / icomoon.eot 7kkyc2?') ; 
          src :  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
          url('fonts/icomoon.woff?7kkyc2') format('woff'),
          url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
        }

        span {
            font-family: "icomoon";
            font-size: 200px;
            color: red;
        }

        p::before {
            font-family: "icomoon";
            font-size: 100px;
            content: "\e93e";
        }

    </style>
</head>
<body>
    <span></span>
    <span></span>
    <p></p>
</body>
</html>

02-CSS basic and advanced -day11_2018-09-17-20-08-19

Guess you like