FontAwesome icons as subtle background for TagTiles

FullThrottle83

Hi!

I'm using the excellent Fluent Theme

I like the looks of Tags page per default
TagTiles

But I like it even more with the FontAwesome icons chosen in Tags as a subtle background for the TagTiles
TagTiles FontAwesome Background

Here is CSS for it, if anyone wants.

.TagTile {
    position: relative;
    overflow: hidden;
}

.TagTile .TagTile-info .icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 100px;
    color: rgba(211, 211, 211, 0.3);
    z-index: 0;
}

.TagTile .TagTile-info {
    position: relative;
    z-index: 1;
}

Adjust size, color and placement for your own needs.

Juba007

I haven't tried it, but there seems to be a part of the CSS code ist missing, right at the beginning. I assume it's just the class. But of course it could cause problems for some people who want to use it.

FullThrottle83

Juba007 Wohaa, You are correct. I missed a line break so it got missed.
Corrected now.

treyb

FullThrottle83

Looks a little funky on mine.

Juba007

treyb Are you using the Fluent Theme? As it is mentioned in the original post? If not, this is probably the reason.

treyb

Juba007 Yep, seems to have fixed itself once I added descriptions.

Edit: This also works very well outside of Fluent

FullThrottle83

Yes, you are correct. You need to down-size the icon if not using a description, otherwise you'll get that scrollbar.