EverWeb Widgets

Icon Maker

Red Image

The Icon Maker creates links which use any of the 100s of HTML entities available. The widget has a button which, when clicked, opens a website which list many of these.
The entities are inserted into the content of a CSS ::after selector so thay need to be converted from HTML to their CSS equivalent. This can be done with the Code Equivalent Calculator and there is another button in the widget settings to open it.


Widget

The widget settings are shown in the screenshot to the left.

Click the button to find the required entity. Make sure to select the HTML Code and NOT the HTML Entity.
Copy the code to the clipboard and then click the button to open the Converter which will appear in a browser window.

Paste the code into the HTML box and click the "Convert" button.
Copy the CSS code which appears in the box and paste it into the widget settings.

Text can be entered into the title attribute which will appear on hover when the page is viewed on a computer or laptop.

The tab can be linked to in internal or external page and can open in a new window if required.
There are controls for adjusting the tab size and the icon size and for setting the icon color and hover color.
The background color can also be adjusted for opacity. There are controls for the border width, color and radius and a checkbox to create a round icon.

If the overall size, icon size or border width are adjusted, the position of the icon within its container will need adjusted too.
Use the "Left" control to position it horizontally and use the line height control to adjust its vertical position.

The angle adjustment is to used change the direction of symbols which don't have an alternative direction. For example, if a heavy down arrow is needed, use the ➔ and rotate it through 90° as shown in the second example above.

One symbol you don't see listed in too many places is the  The HTML is &#63743 and the CSS is \F8FF

© EverWeb Widgets -