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
Replace drop-down icons with Font Awesome icons?
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Replace drop-down icons with Font Awesome icons?
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.
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.
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Re: Replace drop-down icons with Font Awesome icons?
Yes, you can.
I use FontAwesome (v4.7.0) to display icons at the end of drop downs, using the following CSS:
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.
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;
}
* 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.
Re: Replace drop-down icons with Font Awesome icons?
That's great, thank you very much Dave!