font awesome

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <link rel="stylesheet" href="./css/font-awesome.min.css">
  9. </head>
  10. <body>
  11.     <i class="fa fa-apple"></i>
  12.     <i class="fa fa-bluetooth "></i>
  13.     <i class="fa-bluetooth "></i>
  14. </body>
  15. </html>

image.png
前面没有fa，不是后代选择器，会发生错误

为了增加图标大小相对于它们的容器, 使用 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.

  1.   <style>
  2.         .big-size {
  3.             /*一般自己设置font-size,而不用fa-5x等库设置好的类*/
  4.             font-size: 60px;
  5.         }
  6.     </style>
  8.     <i class="fa fa-bluetooth fa-lg"></i>
  9.     <i class="fa fa-bluetooth fa-5x"></i>
  11.     <i class="fa fa-bluetooth big-size"></i>

image.png

image.png
一般用float，自己写，不会用它这个，兼容性不好

大型网站一般不会用

自己的网站可以用

  1.    <style>
  2.         .fa{
  3.             margin-right: 30px;
  4.         }
  5.     </style>
  6.     <i class="fa fa-home"></i> HOME

image.png

矢量库

icon.css

  1. .icon{
  2.     display: block;
  3.     width: 32px;
  4.     height: 32px;
  5.     background-repeat: no-repeat;
  6.     background-size: 100% 100%;
  7. }
  9. .icon-calendar{
  10.     background-image: url('../icons/calendar.png');
  11. }

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <link rel="stylesheet" href="./css/font-awesome.min.css">
  10.     <link rel="stylesheet" href="./css/icon.css">
  11. </head>
  13. <body>
  15.     <i class="icon icon-calendar"></i>
  16. </body>
  18. </html>

image.png
icon icon-calendar不同的类，它们的属性不一样，用时两个类都得写上，不互相影响

  1. .icon {
  2.   display: block;
  3.   width: 32px;
  4.   height: 32px;
  5.   background-repeat: no-repeat;
  6.   background-size: 100% 100%;
  7. }
  9. .icon-calendar {
  10.   background-image: url("../icons/calendar.png");
  11. }
  13. .icon-goods {
  14.   background-image: url("../icons/goods.png");
  15. }
  17. .icon-files {
  18.   background-image: url("../icons/files.png");
  19. }
  21. .icon-identity {
  22.   background-image: url("../icons/identity.png");
  23. }
  25. .icon-income {
  26.   background-image: url("../icons/income.png");
  27. }
  29. .icon-job {
  30.   background-image: url("../icons/job.png");
  31. }

雪碧图

image.png

image.png
修改后的代码

网站生成

css_sprites.png

  1. .calendar {
  2.  background: url(images/css_sprites.png) -0px -0px no-repeat;
  3.  width: 200px;
  4.  height:200px;
  5. }
  6. .edit {
  7.  background: url(images/css_sprites.png) -200px -0px no-repeat;
  8.  width: 200px;
  9.  height:200px;
  10. }

三步

image.png

css px小数点

四舍五入 最好写小数点

九宫格