There are times when implementing the horizontal rule does not produce the desired look. The Xidipity emblem rule solves this problem by embellishing the horizontal rule with icons and/or titles. The design permits changes to the line width, style, and color and titles and icons may be centered, left or right justified.
The emblem rule is a Xidipity enhancement of the horizontal rule which permits the addition of icons and/or text. This post is not an exhaustive list of the options available but should certainly open the door to the possibilities. I should also note a standard and wide emblem rule is included in the horizontal rule toolbar button. This rule is a single line and includes a unicode symbol which represents an object, function, or process in the middle. This symbol can be replaced with another unicode symbol and styled as desired (see Horizontal Rule Toolbar).
- Zidipity color palette
- Google material design icons
- Font Awesome icons
- Sandbox Editor
- CSS Gradient tool
|chat_bubble_outline||My intent for using Font Awesome icons in some examples and Google Icons in others is to demonstrate either icon set works. If you are unfamiliar with font awesome, I suggest reviewing the font awesome tutorial. In addition, I will be using and referring to the sandbox editor when making changes to the templates.|
Standard Rule – 80% Width – Icon Center
This design is a modified 80% single line rule with a material design icon placed in the center. Notice on line 3 and 5 the use of a gradient rule modified with a new style. I suggest using an online gradient tool to create the new background colors. As this template has a lot going on you may want to consider using the sandbox editor as an interim step.
Thick Line Rule – 100% Width – Icon Centered
This is a twist on the double line rule presented with a background color between the bars which spans 100% of the available space with an icon placed in the center. I will point out the wrapper is missing a style (see line 2) which limits the size of the rule (the default is 100%). As with the template above, you may want to consider using the sandbox editor.
There are many other possibilities with this template. For example the border color on lines 3 & 5 could be different than the background color. The size of the icon may be modified by adding a “font-size” statement to the icon style on line 4.
Text & Icon Rule – Single Line – Color Icon & Color Title Centered
Text & Icon Rule – Single Line – Color Icon & Color Title Left
Text & Icon Rule – Single Line – Color Icon & Color Title Right
This design will also work at the 80% width but the percentages may need to be tweaked. Although the template sets the icon and title area to 25%, this number may need adjustment in the event the title becomes longer or shorter. Be mindful the sum of the line and icon percentages should equal 100% in the final product.
The installation instructions apply to all of the emblem rule templates. As suggested above, an optional interim step is to configure your emblem rule in the sandbox editor and then copy and paste the completed product to the embed tool. This is optional but I will write the instructions assuming the sandbox editor is used.
In the circumstance where a gradient is going to be applied, as stated above, I suggest using an online gradient tool to build the gradient and then paste the css output to the template. If the css has multiple lines, I suggest concatenating the lines.
As a reminder, the ICON TAG is the “<i></i>” tags which contains the icon.
Font awesome = “<i class=”fab fa-accessible-icon”></i>“
Google accessible_forward = “<i class=”material-icons”>accessible_forward</i>“
- Highlight & copy the template to the clipboard
- Paste clipboard into the sandbox editor
- Replace “#YOUR-COLOR” with the icon or background color
- Replace any “BACKGROUND-GRADIENT” with your css gradient code
- Replace “ICON-TAG” with your icon tag
- Click on the line where rule will be placed
- Click the ( save_alt ) embed button
- Paste clipboard into textbox
- Click the “OK” button
If you are puzzled by the design, this design works well on all media types including print.