Replace drop-down icons with Font Awesome icons?

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Replace drop-down icons with Font Awesome icons?

Post by rogersm »

Hi all

When you insert a drop-down around content in Flare, the output displays a Plus and Minus icon to show and hide the content. These icons display as background images in the css I think. Is it possible to replace these icons with Font Awesome icons?

thanks,
mark
trent the thief
Propellus Maximus
Posts: 608
Joined: Wed Feb 01, 2006 6:21 am
Location: Off in the dark....

Re: Replace drop-down icons with Font Awesome icons?

Post by trent the thief »

Hi Mark,

Use the developer tools (F12) and select the elements icon (called out) to then locate the item on the page.

To do serious customizations you'll need Dev Tools to help identify elements in your project. The image below shows details for a MadCap:dropDown. Locating and identifying Flare's element is more than half the battle. Usually, anything you can identify, you can replace.

Image
Trent.

Certifiable.

Image

umm...
I meant MAD Certified.

Official Propeller Beanie Owner :-)

:flare: Are you on Flare's Slack channels? PM me for an invitation! :flare:
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Replace drop-down icons with Font Awesome icons?

Post by NorthEast »

Yes, you can.
I use FontAwesome (v4.7.0) to display icons at the end of drop downs, using the following CSS:

Code: Select all

MadCap|dropDown	/* MadCap|dropDown: Drop downs */
{
	margin-bottom: 1em;
	mc-open-image-alt-text: Close this section;
	mc-closed-image-alt-text: Open this section;
	mc-image-spacing: 0;
	mc-open-image: none;
	mc-closed-image: none;
	mc-image-position: none;
}

.dropDown.MCDropDown_Closed > .dropDownHead > .dropDownHotspot:after	/* FontAwesome : fa-angle-down for closed */
{
	font-family: "FontAwesome";
	content: "\f107";
	padding: 0 0 0 0.5em;
	display: inline-block;
}

.dropDown.MCDropDown_Open > .dropDownHead > .dropDownHotspot:after	/* FontAwesome : fa-angle-up for closed open */
{
	font-family: "FontAwesome";
	content: "\f106";
	padding: 0 0 0 0.5em;
	display: inline-block;
}
Notes:
* The existing image must be removed by setting mc-open-image and mc-closed-image to none.
* The new images are set by using the appropriate character code for the FontAwesomeicon, e.g. "\f107" is fa-angle-down.
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Replace drop-down icons with Font Awesome icons?

Post by rogersm »

That's great, thank you very much Dave!
Post Reply