目录
最简单的使用i标签做小图标
运行截图如下:
实例结构如下:
此处就是使用i标签制作的小图标
其中html源码如下:
- <html>
- <head>
- <title>Hello World</title>
- <link href="test.css" rel="stylesheet">
- </head>
-
- <body>
- <div>
- <i class="icon"></i>
- </div>
- </body>
-
- </html>
css源码如下:
- .icon{
- display: inline-block;
- width: 100px;
- height: 100px;
- background-image: url(girl.jpg);
- background-position: center center;
- background-size: 60px 60px;
- background-repeat: no-repeat;
- }
下面是最关键的地方,如果下载了网上的前端代码,如何进行操作,这里我记录下,方便以后快速查阅!
修改前端源码注意的问题
原始页面如下:
修改后为:
这里找到对应的CSS后,发现这里有2个要改的地方(可能是前端设计问题,要修改两处才能完成)!
都是icons.css里面
一个是此处:
一处是:
这里要注意,改的时候,要改根里面的,也就是
在only screen and 这里面的可能不会生效!