1.
<link rel="stylesheet" href="../css/font-awesome.min.css"/>
<div><i class="fa fa-envelope-o " aria-hidden="true"></i></div> //在awesome内提供标签名
2. border-radius 实现变圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/font-awesome.min.css"/> <style> .pg-header{ height: 48px; line-height: 48px; background-color: #00a4ef; } .pg-header .logo{ width: 200px; height: 48px; line-height: 48px; text-align: center; background-color: #303030; color: white; } .pg-header .user{ margin-right: 60px; padding: 0 20px; color: white; height: 48px; } .pg-header .user:hover{ background-color: #dddddd; } .pg-header .user .a .image{ padding-top: 4px; width: 30px; height: 40px; border-radius: 50%; } .pg-header .user .b{ position: absolute; top:70%; left: 0; z-index:20; color: white; display: none; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .pg-header .icon{ padding: 0 20px; } .pg-header .icon:hover{ background-color: #dddddd; } .left{ float: left; } .right{ float: right; } .pg-content .menu{ position: absolute; width: 200px; left: 0; top: 48px; bottom: 0; background-color: #dddddd; min-width: 100px; } .pg-content .content{ z-index : 10; position: absolute; left: 200px; right: 0; top: 48px; bottom: 0; background-color: #303030; overflow: auto; } body { margin: 0 auto; } </style> </head> <body> <div class="pg-header"> <div class="logo left">老男孩</div> <div class="user right" style="position: relative"> <div> <a class="a" href="#"> <image class='image' src="1.jpg"></image> </a> <div class="b"> <a >我的资料</a> <a >注册</a> </div> </div> </div> <div class="icon right"> <i class="fa fa-bell-o" aria-hidden="true"></i> <span style="display: inline-block; background-color: red; border-radius: 50%; 30px; line-height: 30px; height: 30px; text-align: center">5</span> </div> <div class="icon right"><i class="fa fa-envelope-o " aria-hidden="true"></i></div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left">f</div> </div> </body> </html>