Custom <hr> class

[Keith Vaugh+ 16]

Hi All

 

I trying to create a custom <hr> class with two parallel lines and a heart in the centre. The CSS I am using is:

hr.heart {
	border-top: 4px double #8c8b8b;
	text-align: center;
}

hr.heart:after {
	font-family: FontAwesome;
        content: '\f004';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

I am trying to call the FontAwesome heart shape. The two parallel lines are working fine, but I cannot get the heart or any character to show. 

Would appreciate a dig out. 

Thanks

[Danny+ 1,327]

HI Keith,

 

This is most likely because of two reasons.

 

1. Your code isn't correct, it needs to be font-family: PageLinesFont;

2. If you're adding your code to the DMS Toolbar > Custom > Custom CSS/LESS, this editor is for basic or standard CSS/LESS and not for advanced things like using the content property. As / | \ will be stripped.

So you're going to need to use a child theme and add your styling there instead. When I fixed your CSS issue with the font family and added the code to my child theme, the code worked without any issue.

 

https://cloudup.com/cLl1POPZlWt

[Keith Vaugh+ 16]

Thanks Danny. Is that the correct font-family for Framework also? I'll be working on a child theme for the DMS migration (once I get past my header issues )

 

Keith

 

[Danny+ 1,327]

Yeah, PageLinesFont is the correct font name to use in DMS and PageLines Framework.