Using font awesome for social links and menus

PLACE FOR BLOG

Using font awesome for social links and menus

Using font awesome for social links and menus

marija

While it's doable to put all font awesome icons in a dropdown and let the editor choose one of them, most of the time, this is not really desirable, due to:

  • Having control over the site looks from design perspective
  • Editor gets too many choices and it's not easy to find the right icon either.

Two use-cases we used these icons for are as follows:

  • Using the icons to give editor the possibility to flag menu items
  • Using icons for footer social links (links that link to company's social network channels)

Using the icons to give editor the possibility to flag menu items

The set of icons that are supposed to be shown in the menu are probably restricted to a couple of icons that designer chooses. Most probably this property would be put to a page type that builds up the menu:

        [Display(
            Name = "Font Awesome Icon",
            GroupName = SystemTabNames.Content,
            Order = 3)]
        [Required]
        [UIHint(CustomUiHints.MenuAwesomeDropdown, PresentationLayer.Edit)]
        [UIHint(CustomUiHints.AwesomeDropdown, PresentationLayer.Website)]
        public virtual string FontAwesomeCssClass { get; set; }

Note that there are two UIHint-s:

  • MenuAwesomeDropdown - used to mark which editor descriptor should be used in edit mode (PresentationLayer.Edit)
  • AwesomeDropdown - used to call the correct DisplayTemplate (PresentationLayer.Website)

This is to maximize the code reuse. Check out the DisplayTemplate here.

        @model string
        
        <i class="fa @Model"></i> 

Using icons for footer social links

To use the icons for footer social links, a block is used to group all the properties that are related to a specific link. This can be set to anything of your preference, here is an example of how I defined the block:

    [ContentType(GUID = "DD6A59EB-122C-4EB3-87D7-8DE223B9E18D")]
    public class AwesomeLinkBlock : BlockData
    {
        [Display(
            GroupName = SystemTabNames.Content,
            Order = 1)]
        [Required]
        public virtual Url Link { get; set; }

        [Display(
            GroupName = SystemTabNames.Content,
            Order = 2)]
        [Required]
        public virtual string Heading { get; set; }

        [Display(
            Name = "Font Awesome Icon",
            GroupName = SystemTabNames.Content,
            Order = 3)]
        [Required]
        [UIHint(CustomUiHints.SocialAwesomeDropdown, PresentationLayer.Edit)]
        [UIHint(CustomUiHints.AwesomeDropdown, PresentationLayer.Website)]
        public virtual string FontAwesomeCssClass { get; set; }
    }

One UIHint is the same as above - AwesomeDropdown, the other one is called SocialAwesomeDropdown to mark the other subset of icons (FB, Twitter, etc.)

Then, on the start page (or maybe a settings page), a ContentArea that accepts only this type of blocks is created:

        [Display(
             GroupName = SystemTabNames.Content,
             Order = 320)]
        [AllowedTypes(typeof(AwesomeLinkBlock))]
        [CultureSpecific]
        public virtual ContentArea SocialArea { get; set; }

What do Menu- and Social- AwesomeDropdown(s) do?

They are used to select which subset of icons will be loaded in the dropdown in edit mode. They inherit from the same class and contain no code, only the registration of the templates:

    [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = CustomUiHints.SocialAwesomeDropdown)]
    public class SocialAwesomeDropdownEditorDescriptor : AwesomeDropdownEditorDescriptor
    {
    }

    [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = CustomUiHints.MenuAwesomeDropdown)]
    public class MenuAwesomeDropdownEditorDescriptor : AwesomeDropdownEditorDescriptor
    {
    }
    
    public class AwesomeDropdownEditorDescriptor : EditorDescriptor
    {
        public AwesomeDropdownEditorDescriptor()
        {
            SelectionFactoryType = typeof(AwesomeSelectionFactory);
            ClientEditingClass = "alloy/editors/AwesomeSelectionEditor";
            EditorConfiguration.Add("style", "width: 72px");
        }
    }

More interesting part is inside AwesomeSelectionFactory, which uses the UIHint to select the xml file:

    public class AwesomeSelectionFactory : ISelectionFactory
    {
        public IEnumerable GetSelections(
            ExtendedMetadata metadata)
        {
            var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, string.Format(@"Awesome\{0}.xml", metadata.UIHint));
            XDocument xdoc = XDocument.Load(path);

            foreach (var node in xdoc.Document.Descendants("string"))
            {
                var nameOfFontCssClass = node.Attribute("name").Value;
                yield return new SelectItem
                {
                    Value = nameOfFontCssClass,
                    Text = string.Format("   {1}", nameOfFontCssClass, nameOfFontCssClass.Substring(3))
                };
            }
        }
    }

Then, xml files are saved to Awesome/SocialAwesomeDropdown.xml and Awesome/MenuAwesomeDropdown.xml. The format is as follows:

<resources>
<string name="fa-twitter-square">Here goes the ASCII for the content</string>
</resources>

Hope you like the solution and if you see any other awesome use-cases, do share them as comments!

LEAVE A COMMENT