> For the complete documentation index, see [llms.txt](https://docs.planetstyles.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.planetstyles.net/feature-guides/milk-theme/milk-forum-icon-options.md).

# Milk: Forum icon options

Milk uses FontAwesome CSS icons to differentiate between read / unread states. This allows faster loading times and lossless quality on all devices. 

It is possible to use your own images as forum icons.

| Option name | Value                                                               |
| ----------- | ------------------------------------------------------------------- |
| Circle      | <img src="/files/Lkhm5S9hDyUYdoM3Lp1k" alt="" data-size="original"> |
| Square      | <img src="/files/8Pg6YOrzfHWllJHsdLb4" alt="" data-size="original"> |

### Switching icon shape

1. Open the FlightDeck extension (control panel)
2. Find "CSS icon shape"
3. Set as required
4. Submit

***

### Changing icon image

The icon values are defined in: yourforum.com/Milk\_v2/theme/icons\_forums\_topics.css

```
/* Set the icons */            				 /* Megaphone */
.global_read:before							{content: "f0a1";}
.global_read_mine:before					{content: "f0a1";}
.global_read_locked:before					{content: "f0a1";}
.global_read_locked_mine:before				{content: "f0a1";}
.global_unread:before						{content: "f0a1";}
.global_unread_mine:before					{content: "f0a1";}
.global_unread_locked:before				{content: "f0a1";}
.global_unread_locked_mine:before			{content: "f0a1";}


											/* Megaphone */
.announce_read:before						{content: "f0a1";}
.announce_read_mine:before					{content: "f0a1";}
.announce_read_locked:before				{content: "f0a1";}
.announce_read_locked_mine:before			{content: "f0a1";}
.announce_unread:before						{content: "f0a1";}
.announce_unread_mine:before				{content: "f0a1";}
.announce_unread_locked:before				{content: "f0a1";}
.announce_unread_locked_mine:before			{content: "f0a1";}


											/* External link */
.forum_link:before							{content: "f08e";}


											/* Speech Bubble */
.forum_read:before							{content: "f068";}
.forum_read_subforum:before					{content: "f068";}


											/* Check */
.forum_unread:before						{content: "f00c";}
.forum_unread_subforum:before				{content: "f00c";}


											/* Pin */
.sticky_read:before							{content: "f08d";}
.sticky_read_mine:before					{content: "f08d";}
.sticky_read_locked:before					{content: "f08d";}
.sticky_read_locked_mine:before				{content: "f08d";}


.sticky_unread:before						{content: "f08d";}
.sticky_unread_mine:before					{content: "f08d";}
.sticky_unread_locked:before				{content: "f08d";}
.sticky_unread_locked_mine:before			{content: "f08d";}


											/* Right arrow */
.topic_moved:before							{content: "f061";}


											/* Envelope */
.pm_read:before 							{content: "f0e0";}
.pm_unread:before 							{content: "f0e0";}


											/* Bar */
.topic_read:before							{content: "f068";}
.topic_read_mine:before						{content: "f068";}
.topic_read_hot:before						{content: "f068";}
.topic_read_hot_mine:before					{content: "f068";}
											/* Tick */
.topic_unread:before						{content: "f00c";}
.topic_unread_mine:before					{content: "f00c";}
.topic_unread_hot:before					{content: "f00c";}
.topic_unread_hot_mine:before				{content: "f00c";}


											/* Cross */
.forum_read_locked:before					{content: "f00d";}
.forum_unread_locked:before					{content: "f00d";}
.topic_read_locked:before					{content: "f00d";}
.topic_read_locked_mine:before				{content: "f00d";}
.topic_unread_locked:before					{content: "f00d";}
.topic_unread_locked_mine:before			{content: "f00d";}
```

Milk uses [FontAwesome 4.7 icons](https://fontawesome.com/v4/icons/) to represent read / unread states. After finding the new icon you want to use, open its page on the FontAwesome website where you'll be able to grab the **unicode** value.&#x20;

Replace the unicode value above as necessary.&#x20;

See: [How to edit code files](/getting-started/how-to-edit-code-files.md)

***

### Disabling the pulse animation

The pulsing animation is defined in:  `yourforum.com/Milk_v2/theme/icons_forums_topics.css`

```
/* Box shadow for unread pulse icons */
@keyframes UnreadPulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(132,189,0,0.4);
      box-shadow: 0 0 0 0 rgba(132,189,0,0.4);
      -webkit-box-shadow: 0 0 0 0 rgba(132,189,0,0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 8px rgba(132,189,0,0);
        box-shadow: 0 0 0 8px rgba(132,189,0, 0);
        -webkit-box-shadow: 0 0 0 8px rgba(132,189,0,0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(132,189,0,0);
        box-shadow: 0 0 0 0 rgba(132,189,0,0);
        -webkit-box-shadow: 0 0 0 0 rgba(132,189,0,0);
    }
}

/* Box shadow for unread pulse icons */
@keyframes UnreadLockedPulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(189,0,0,0.4);
      box-shadow: 0 0 0 0 rgba(189,0,0,0.4);
-webkit-box-shadow: 0 0 0 0 rgba(189,0,0,0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 8px rgba(189,0,0,0);
        box-shadow: 0 0 0 8px rgba(189,0,0, 0);
        -webkit-box-shadow: 0 0 0 8px rgba(189,0,0,0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(189,0,0,0);
        box-shadow: 0 0 0 0 rgba(189,0,0,0);
        -webkit-box-shadow: 0 0 0 0 rgba(189,0,0,0);
    }
}
```

You can delete this code to disable the animation.