Simple SVG Question

[Pat]

Hello Everyone,

First of all thank you for helping me out, just joined here and I look forward to exploring this site in depth.

I made a codepen to illustrate my issue.
http://codepen.io/anon/pen/kLeJx

I am trying to have a simple square Before my h3 text – I have made a workaround with a “bg” div behind the h3, and then just adjusted the margin so that the background div shows, but I have a feeling there is a cleaner way to do this…

I have tried a couple ways to insert some inline SVG code but I am having trouble getting the SVG to fit to the size of the h3 container (for responsive purposes) – also I read that article on using SVGs and Data URIs (https://css-tricks.com/data-uris/) and would like to incorporate this to help on load time ( since these squares will eventually be in a wordpress theme and loading multiple times)

Thank you for any help – I think there is a simple solution but I can’t seem to crack it

[e6z6a6z]

why dont you try styling it with
` h3:before{
content:url(image.jpg);
}
or

h3:before{
content:”;
height: /****same as h3’s height*****/
width:/*****whatever you want******/
}
`

[Author]

Posts