如何仅使用纯 CSS 来制作编辑图标样式？

Question

我想使用纯 CSS 来设计上面的图像。

到目前为止，我只能在没有编辑图标的情况下进行设计。

以下是我迄今为止提出的 HTML 和 CSS：

<div>
    <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<style>
    .main-profile-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
</style>

我只需要右上角编辑图标的 HTML 和 CSS 代码。

Answer 1

div {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position: relative;
}

div img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

div i {
  position: absolute;
  top: 20px;
  right: -7px;
  /* border: 1px solid; */
  border-radius: 50%;
  /* padding: 11px; */
  height: 30px;
  width: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: cornflowerblue;
  box-shadow: 0 0 8px 3px #B8B8B8;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div>
  <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" class="main-profile-img" />
  <i class="fa fa-edit"></i>
</div>