Jump to content

Archived

This topic is now archived and is closed to further replies.

Keith Vaugh

Custom <hr> class

Recommended Posts

Keith Vaugh

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

Share this post


Link to post
Share on other sites
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh

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

 

Share this post


Link to post
Share on other sites
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×