[Repl.it] Weegle

귀여운 내 Weegle

키보드랑 마이크 아이콘이 붙어 있어서 떼어내느라 고생했다.

처음에 div(.icon)가 아닌 i 자체에 absolute 포지션을 줬더니 두 개의 아이콘이 붙어 다녀서 i에 마진을 줘도 패딩을 줘도 반응이 없었다.

.icon{
  position: absolute;
  top: 7px;
  right: 10px;
}
i{
  margin-left:10px;
}

* {
  box-sizing: border-box;
}

.weegle{
  text-align: center;
}

.searchBar{
  position: relative;
  width: 500px;
  margin:auto;
}

input{
  width: 100%;
  border: 1px #bbb solid;
  padding: 10px 12px 10px 40px;
  font-size: 14px;
  border-radius: 25px;
}

.searchBar img{
  position: absolute;
  height: 17px;
  top: 10px;
  left: 12px;
  margin: 0;
}

.icon{
  position: absolute;
  top: 7px;
  right: 10px;
}

i{
  margin-left:10px;
}

a{
  text-decoration: none;
}

button{
  height: 40px;
  border-radius: 5px;
  border: 0px;
}
.button{
  padding-top:20px;
}