思路：用i标签(行级元素，需要先修改为行内块级元素)先做一个边长为6px的正方形边框，然后tranform:rotate(-45deg) 逆时针旋转45deg。变成一个◇，然后只保留上边框和左边框。即可变成一个向下的小箭头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
.icon-downarrow{
display:inline-block;
width:6px;
height:6px;
border-left:2px solid black;
border-bottom:2px solid black;
transform:rotate(-45deg);
margin:0 0 4px 6px;
}
</style>
<body>
<header>
<div class="navbar">
<div class="navbar-left">
<span class="nav-city">广州 <i class="icon-downarrow"></i></span>
</div>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>