https://github.com/danieljoos/letterimages

Use CSS and webfonts as fallback profile images, e.g. for profiles without photo.
https://github.com/danieljoos/letterimages

Last synced: 3 months ago
JSON representation

Use CSS and webfonts as fallback profile images, e.g. for profiles without photo.

• Host: GitHub
• URL: https://github.com/danieljoos/letterimages
• Owner: danieljoos
• License: cc0-1.0
• Created: 2017-01-03T10:13:35.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-10-23T13:33:08.000Z (about 5 years ago)
• Last Synced: 2024-10-03T00:18:27.051Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 111 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# letterimages [![npm version](https://badge.fury.io/js/letterimages.svg)](https://badge.fury.io/js/letterimages)

Use CSS and webfonts as fallback profile images, e.g. for profiles without photo.

The optional Javascript module can be used for more versatile color theme usage.

![letterimages glyphs](preview.png)

## Usage

The stylesheet and webfont assets can be found in the `dist` directory.

Include the stylesheet as usual:

```html

```

Now, add a tag with the desired name in the `data-name` attribute.

Add the class `letterimages` to the element:

```html



```

### Themes

The stylesheet defines some default coloring for each letter.

However the theme of a letterimages-element can be overridden by setting one of the available theme classes:

* `letterimages-teal`

* `letterimages-blue`

* `letterimages-purple`

* `letterimages-orange`

* `letterimages-grey`

### Shapes & Sizes

The size of letterimages elements can be set by the `font-size` CSS attribute.

The stylesheet defines a set of size helper-classes:

* `letterimages-32`

* `letterimages-48`

* `letterimages-64`

* `letterimages-96`

* `letterimages-128`

Custom sizes can be specified by setting the `font-size` to the desired value:

```css

.letterimages-custom {

    font-size: 256px;

    width: 256px;

    height: 256px;

}

```

All letterimages icons have a square base, but can also be used as rounded or circular icons.

The stylesheet defines the following shape helper-classes:

* `letterimages-rounded`

* `letterimages-circle`

### Javascript Module

Optionally, the included Javascript can be used such that names starting with the same letter are more likely to become differently colored:

```html

    import letterimages from '/path/to/letterimages.js';

    letterimages();

```

## Installation

```

npm install letterimages

```

## License

Creative Commons Zero v1.0 Universal

See file `LICENSE`.