# 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="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2FWh92ulZOmLxN1TeTM0UB%2Fimage.png?alt=media&#x26;token=554a1317-0465-4684-8f87-71199c1cd973" alt="" data-size="original"> |
| Square      | <img src="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2FDyLbGeGsDZIN0cPxcDL8%2Fimage.png?alt=media&#x26;token=386d4f75-16d5-4cc4-a114-279fff15c7fe" 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](https://docs.planetstyles.net/getting-started/how-to-edit-code-files "mention")

***

### 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.