• DevTheming

  • FontAwesome icons as subtle background for TagTiles

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.

5 months later

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.

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

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

        Edit: This also works very well outside of Fluent

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