Field Type – Icon Font with Links
WordPress Plugin Staff List – Field Type – Icon Font with Links
Icon font with hyperlinks.
You can easily add a couple of custom icons with links.
They are just hyperlinks. Not Like or Share buttons.
- The field content is displayed as a single row of icons.
- Field can have up to six icons.
- You can have more than one field of the icon font type.
- Icons can be customized with CSS (size, color, shadow, etc.)
Requirements
Field type Icon Font requires adding one of the available icon fonts to your WordPress site. The most popular seems to be Font Awesome but there are others you may use as well.
These type of fonts allow creating scalable vector icons that can be customized with CSS. Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed.
Staff List plugin itself has no built-in icon font. You will need to link or download the font you wish to use. It may be already included with your theme.
There is also the SVG with JavaScript implementation of Font Awesome that can be used with our field types icon font. It automatically replaces i tags with svg
We do not provide any support regarding selecting an installing icon fonts. Googling “How to add icon fonts in your WordPress theme” should provide the required directions.
Icon Options
Staff Template > Input Fields > Icon Font with Links > Icon Options
Font Awesome 4.7.0 cheatsheet.
The above set of option will render as:
Icon Tag
- i
- span
The i and span inline HTML element are widely used to add icons.
Most of the time you will choose the default i tag.
Icon Spacing (Horizontal)
Adds space between icons.
Icon Type
- Web Font with CSS
- SVG with JavaScript
Icon Name
- You can enter any name.
- Icon name will be used for aria-label.
Icon Class
- Depends on the font type. The above example uses Font Awesome 4.7.0
- Facebook icon in the above example has class: fa fa-facebook-official fa-2x
Icon Style
- Optional. Add your own style.
- Facebook icon in the above example has style set as: #3b5998;
- It’s converted to inline style attribute: style=”#3b5998;”
p23757