21.10.2017

Генерация аватара из инициалов пользователя

Наверняка вы замечали, что многие сервисы стали использовать уникальные аватары с инициалами пользователя вместо анонимных иконок. Это делает ваш дизайн интереснее и разнообразнее. Мы хотим поделиться отличным сервисом, который позволяет генерировать такие аватары.

Сервис: https://ui-avatars.com

С помощью этого сайта вы можете получать изображения для аватаров ваших пользователей, для этого необходимо добавить изображение на сайте:

img src="https://ui-avatars.com/api/"

и параметрами для показа аватара.

Параметры

Размер изображения (size)

Размер аватара в пикселях, значения между 16 и 256. По-умолчанию: 64

https://ui-avatars.com/api/?size=128

Размер шрифта (font-size)

Размер шрифта в процентах от размера аватара. По-умолчанию: 0.5

https://ui-avatars.com/api/?font-size=0.33

Количество символов (length)

Количество генерируемых символов. По-умолчанию: 2

https://ui-avatars.com/api/?length=1

Имя (name)

Имя, используемое для генерации аватара. По-умолчанию: John Doe

https://ui-avatars.com/api/?name=Elon+Musk

Круглое изображение (rounded)

Логический параметр для отображения круглого аватара. По-умолчанию: false

https://ui-avatars.com/api/?rounded=true

Фоновый цвет (background)

Цвет в hex формате для фона изображения без символа решетки (#). По-умолчанию: ddd

https://ui-avatars.com/api/?background=a0a0a0

Цвет шрифта (color)

Цвет в hex формате для шрифта без символа решетки (#). По-умолчанию: 222

https://ui-avatars.com/api/?color=ff0000

Заглавные буквы (uppercase)

Логический параметр для использования только заглавных букв. По-умолчанию: true

https://ui-avatars.com/api/?uppercase=false&amp;name=different+Case

Все параметры могут быть использованы вместе в генерации одного изображения.

HTML
CSS

<img src="https://ui-avatars.com/api/?size=96&name=Artemiy+Lebedev&font-size=0.33&background=f00&color=fff&rounded=true" class="center-block">
<img src="https://ui-avatars.com/api/?size=128&name=Arseniy+Zlobin&font-size=0.33&background=1967c3&color=fff&rounded=true" class="center-block">
<img src="https://ui-avatars.com/api/?size=96&name=Sergey+Popkov&font-size=0.33&background=17bee3&color=fff&rounded=true" class="center-block">

#demo {
	text-align: center;
}
#demo img {
	display: inline-block;
}

Демонстрация