Help Styled Boxes for Notes, Warnings, Examples, & Tips

[Lan_OZ]

Hi
I am trying to set up boxes for notes etc in my project and want to use font awesome. I have managed to get it working but have a problem when text goes into a 2nd line. How to i make it so the 2nd or 3rd line indents in like the first line. Can someone tell me how i can fix my stylesheet code?

Below is my stylesheet CSS:

Code: Select all

div.noteNOTES:before
{
	font-family: "FontAwesome";
	content: '\f08d  ';
	display: inline-block;
	font-size: 38px;
	color: #1FB3E1;
	-webkit-text-stroke: #ffffff 0.25px;
	text-align: left;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	padding-right:24px;
} 
 
div.noteNOTES
{
	background-color: #EAF8FC;
	line-height: 18px;
	width: 100%;
	overflow: hidden;
	margin-top: 6px;
	margin-bottom: 6px;
	padding-left: 24px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 15px;
	border-left-style: solid;
	border-left-width: 4px;
	border-left-color: #1FB3E1;
	mc-next-tag: p;
}

Thank you
Lan

note.PNG

[Psider]

In the div.noteNOTES style, try adding a padding-left that's the total width of the "before" box (sum of the image width + left and right margin + left and right padding + left and right border width as applicable) plus a negative text-indent that's about half the padding you added. The padding pushes the paragraph towards the middle of the page, then the negative text indent pulls the first line only back towards the edge of the page.

e.g.
padding-left: 60px;
text-indent: -30px;

[Lan_OZ]

wow thank you that worked once I also fixed my padding right. thank you so much. the only other thing that's now a bit funny is getting my icon to be middle aligned vertically, when it has 2 or more lines. any ideas on how to solve that as well?
L

[Psider]

Hmm not easily with what we've done so far I think. Perhaps we can try a different approach using flex?

Using the original css you posted, add the following to the div style:
display: flex;
justify-content: center;

Then in the :before style, add margin: auto 24px auto auto; and delete the padding-right style.

You might also need to reduce the padding-left in the div style, but as I don't have the font awesome icon I can't exactly see how it will look.