Issue
Got this avatar design displaying profile pic, name and surname, and an icon to change the profile pic.
Right now the icon is too low, I'd like to have it higher near the image, possibly on the border but any closer will be alright. Trying to get as close as possible to this design:
Here's my code so far:
<ion-avatar class="profile-pic-container">
<ion-img src="../../../assets/images/profile-pic.jpg"></ion-img>
<ion-icon id="camera-icon" name="camera"></ion-icon>
</ion-avatar>
.profile-pic-container {
height: 100px;
width: 100px;
}
ion-avatar {
// make the icon stay on the right
text-align: right;
}
#camera-icon {
font-size: 24px;
}
I tried putting the ion-icon inside the ion-img tag but it disappears, tried playing with the icon's align and position but I'm either thinking about it the wrong way or not good enough with css since I can only manage to make it stay on the left.
Solution
Set the container to position: relative
, and then absolute
ly position the camera icon.
.profile-pic-container {
position: relative;
height: 100px;
width: 100px;
}
ion-avatar {
text-align: right;
}
#camera-icon {
font-size: 24px;
position: absolute;
bottom: 12px; // tweak this
right: 12px; // tweak this
}
Answered By - z4nzib4r
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.