Avatar
An 'avatar' is a small image that you can add to your profile. It can be a photo of you or of any other image that you want.
Hydrogen provides two type of avatars viz. image, and text with four different sizes which are large, medium, small and extra small.
Image Avatar
You can use avatar class with contextual classes
to add size to the avatars. For example, if you want an image
avatar of medium size you can use
class="avatar avatar-md. By default avatars are
shaped as circle. Don't forget to add
img-responsive and img-round class
to img element.
Round Image Avatar
Square Image Avatar
Use avatar-sq class to make avatar square.
Text Avatar
In text avatar you can use initials of the user or their first
or last name. You need to add avatar-text class
along with the size contextual classes.