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.

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

Replace the unicode value above as necessary.

See: How to edit code files

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.

Last updated