Search posts, tags, users, and pages
Here's a jsfiddle of this kind of thing: https://jsfiddle.net/hcu0dp98/
Not the prettiest example, and it uses font-awesome, but the concept should get you where you're going. :)
Thanks. Do you know if it has limitations in Edge or IE due to the flexbox?
Ahh.. seems the flexbox part is not related to the icon in the background :-)
I just used the flexbox solely for centering the div on the page. If you remove all styles on .container, the font background still works perfectly.
Essentially, I use set the .content div as relative, but don't set any top, bottom, left, or right so that I can set the .icon-bg as absolutely positioned and it will stay within the container div, instead of being absolutely positioned on the page.
From there, I just use an overflow: hidden on the .content div so that the icon looks like its a background on the .content div and doesn't show beyond the border.
So, it should be fine on pretty much every browser. (Minus the rgba colors, which require IE9+)
@Flascher I played around with it and changed it a bit. There are 2 problems as I see though:
1) the icon is not fixed positioned but moving around according to the size of the box, that might be fixable by changing top to bottom
2) it's visible outside the box, do you know if it's possible to completely hide the part that's not inside it?
Here's the fiddle you provided without the clock showing up outside the box.
https://jsfiddle.net/8htaqfj0/
I added a comment above the line of CSS that does that for you. As for the clock moving around, you might be able to fix that by using a certain px size instead of a percentage, but I'd have to play around with it. If I can figure something out I'll post another reply with that too :)
@Flascher Here's the solution to make it work no matter the box size: https://jsfiddle.net/qnwk27ts/
And the fix with Google Material Icons :-) Thanks for the help
https://jsfiddle.net/p9rys97u/
I also fixed so it can't be selected and the pointer doesn't change to text
The positioning is better taken out as it needs to be fixed per icon.
@emilmoe Awesome I'm glad you got a result you're happy with! :)