Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Using Font Awesome icons as links

Home Forums Support Using Font Awesome icons as links

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #176800
    Ángel

    Hi Tom.

    I have a client which would like to use Font Awesome icons as links to certain sections of his blog.

    I know GeneratePress includes Font Awesome, and I can easily do this by code. But my client likes to modify things by himself, and I’m afraid if I do this for him using HTML code and Font Awesome’s CSS clases on the text editor, he will modify something using the visual editor and my work will be lost (since WordPress strips out the code once you switch to the visual editor)

    So far, what I’ve managed to do is use the Better Font Awesome plugin and make the shortcodes generated by this plugin as links. It works, but I kind of feel it is unnecessary adding a Font Awesome plugin since GeneratePress already includes Font Awesome.

    Besides the solution I’ve implemented, is there a better way to do this (that a client without coding knowledge can do by himself)?

    Thanks in advance for any suggestion you can give.

    #176871
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Your best bet is to use a shortcode.

    I like the code of this plugin: https://wordpress.org/plugins/font-awesome-shortcodes/

    It also doesn’t add Font Awesome, it assumes the theme does, which in our case it does 🙂

    #324146
    Derek

    For automatically adding icons for things like links to PDF files I added this to the editor-style.css file in my child theme so the icons are visible in the Editor

    @import url(“../generatepress/css/font-awesome.min.css”);

    I then added this code to the style.css file of the child theme.
    /*
    FILE FORMAT ICONS
    by Greg Schoppe (http://gschoppe.com)
    USAGE: include FontAwesome on page, as shown on http://fontawesome.io
    then include this css file, and target links by adding the link-icon
    class. Note: try to avoid or manually label links to websites, as that
    detection code is necessarily janky. when in doubt, just end all external
    links with a trailing slash (/), a query string (?), or a link target (#)
    */
    a.link-icon:before,
    a.link-icon.link-file[href]:before {
    content: “\f016″; /* generic file icon */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    width: 20px;
    text-align: right;
    margin-right: 10px;
    }
    a[href$=”.txt”].link-icon:before,
    a.link-icon.link-text[href]:before {
    content: “\f0f6″; /*Text*/
    }
    a[href$=”.pdf”].link-icon:before,
    a.link-icon.link-pdf[href]:before {
    content: “\f1c1″; /*PDF*/
    }
    a[href$=”.doc”].link-icon:before,
    a[href$=”.docx”].link-icon:before,
    a.link-icon.link-word[href]:before {
    content: “\f1c2″; /*Word*/
    }
    a[href$=”.xls”].link-icon:before,
    a[href$=”.xlsx”].link-icon:before,
    a.link-icon.link-excel[href]:before {
    content: “\f1c3″; /*Excel*/
    }
    a[href$=”.ppt”].link-icon:before,
    a[href$=”.pptx”].link-icon:before,
    a.link-icon.link-powerpoint[href]:before {
    content: “\f1c4″; /*Powerpoint*/
    }
    a[href$=”.gif”].link-icon:before,
    a[href$=”.jpg”].link-icon:before,
    a[href$=”.jpeg”].link-icon:before,
    a[href$=”.png”].link-icon:before,
    a[href$=”.bmp”].link-icon:before,
    a[href$=”.tif”].link-icon:before,
    a.link-icon.link-image[href]:before {
    content: “\f1c5″; /*Image*/
    }
    a[href$=”.zip”].link-icon:before,
    a[href$=”.zipx”].link-icon:before,
    a[href$=”.rar”].link-icon:before,
    a[href$=”.tar”].link-icon:before,
    a[href$=”.gz”].link-icon:before,
    a[href$=”.dmg”].link-icon:before,
    a[href$=”.iso”].link-icon:before,
    a.link-icon.link-archive[href]:before {
    content: “\f1c6″; /*Archive*/
    }
    a[href$=”.wav”].link-icon:before,
    a[href$=”.mp3″].link-icon:before,
    a[href$=”.fla”].link-icon:before,
    a[href$=”.flac”].link-icon:before,
    a[href$=”.ra”].link-icon:before,
    a[href$=”.rma”].link-icon:before,
    a[href$=”.aif”].link-icon:before,
    a[href$=”.aiff”].link-icon:before,
    a[href$=”.aa”].link-icon:before,
    a[href$=”.aac”].link-icon:before,
    a[href$=”.aax”].link-icon:before,
    a[href$=”.ac3″].link-icon:before,
    a[href$=”.au”].link-icon:before,
    a[href$=”.ogg”].link-icon:before,
    a[href$=”.avr”].link-icon:before,
    a[href$=”.3ga”].link-icon:before,
    a[href$=”.flac”].link-icon:before,
    a[href$=”.mid”].link-icon:before,
    a[href$=”.midi”].link-icon:before,
    a[href$=”.m4a”].link-icon:before,
    a[href$=”.mp4a”].link-icon:before,
    a[href$=”.amz”].link-icon:before,
    a[href$=”.mka”].link-icon:before,
    a[href$=”.asx”].link-icon:before,
    a[href$=”.pcm”].link-icon:before,
    a[href$=”.m3u”].link-icon:before,
    a[href$=”.wma”].link-icon:before,
    a[href$=”.xwma”].link-icon:before,
    a.link-icon.link-audio[href]:before {
    content: “\f1c7″; /*Audio*/
    }
    a[href$=”.avi”].link-icon:before,
    a[href$=”.mpg”].link-icon:before,
    a[href$=”.mp4″].link-icon:before,
    a[href$=”.mkv”].link-icon:before,
    a[href$=”.mov”].link-icon:before,
    a[href$=”.wmv”].link-icon:before,
    a[href$=”.vp6″].link-icon:before,
    a[href$=”.264″].link-icon:before,
    a[href$=”.vid”].link-icon:before,
    a[href$=”.rv”].link-icon:before,
    a[href$=”.webm”].link-icon:before,
    a[href$=”.swf”].link-icon:before,
    a[href$=”.h264″].link-icon:before,
    a[href$=”.flv”].link-icon:before,
    a[href$=”.mk3d”].link-icon:before,
    a[href$=”.gifv”].link-icon:before,
    a[href$=”.oggv”].link-icon:before,
    a[href$=”.3gp”].link-icon:before,
    a[href$=”.m4v”].link-icon:before,
    a[href$=”.movie”].link-icon:before,
    a[href$=”.divx”].link-icon:before,
    a.link-icon.link-video[href]:before {
    content: “\f1c8″; /*Video*/
    }
    a[href$=”.css”].link-icon:before,
    a[href$=”.js”].link-icon:before,
    a[href$=”.py”].link-icon:before,
    a[href$=”.git”].link-icon:before,
    a[href$=”.py”].link-icon:before,
    a[href$=”.cpp”].link-icon:before,
    a[href$=”.h”].link-icon:before,
    a[href$=”.ini”].link-icon:before,
    a[href$=”.config”].link-icon:before,
    a.link-icon.link-code[href]:before {
    content: “\f1c9″; /*code*/
    }
    a[href$=”.exe”].link-icon:before,
    a[href$=”.jar”].link-icon:before,
    a[href$=”.dll”].link-icon:before,
    a[href$=”.bat”].link-icon:before,
    a[href$=”.pl”].link-icon:before,
    a[href$=”.scr”].link-icon:before,
    a[href$=”.msi”].link-icon:before,
    a[href$=”.app”].link-icon:before,
    a[href$=”.deb”].link-icon:before,
    a[href$=”.apk”].link-icon:before,
    a[href$=”.jar”].link-icon:before,
    a[href$=”.vb”].link-icon:before,
    a[href$=”.prg”].link-icon:before,
    a[href$=”.sh”].link-icon:before,
    a.link-icon.link-exe[href]:before {
    content: “\f085″; /*Executable*/
    }

    a[href$=”.com”].link-icon:before,
    a[href$=”.net”].link-icon:before,
    a[href$=”.org”].link-icon:before,
    a[href$=”.edu”].link-icon:before,
    a[href$=”.gov”].link-icon:before,
    a[href$=”.mil”].link-icon:before,
    a[href$=”/”].link-icon:before,
    a[href$=”.html”].link-icon:before,
    a[href$=”.htm”].link-icon:before,
    a[href$=”.xhtml”].link-icon:before,
    a[href$=”.jhtml”].link-icon:before,
    a[href$=”.php”].link-icon:before,
    a[href$=”.php3″].link-icon:before,
    a[href$=”.php4″].link-icon:before,
    a[href$=”.php5″].link-icon:before,
    a[href$=”.phtml”].link-icon:before,
    a[href$=”.asp”].link-icon:before,
    a[href$=”.aspx”].link-icon:before,
    a[href$=”.cfm”].link-icon:before,
    a[href*=”?”].link-icon:before,
    a[href*=”#”].link-icon:before,
    a.link-icon:not([href*=’.’]):before,
    a.link-icon.link[href]:before {
    content: “\f0c1”; /*link*/
    }

    .text-warning {
    color: #8A1B04;
    }
    .text-highlight {
    color: #2C036F;
    }

    .icon-list, .icon-list li {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    .icon-list li {
    margin: 1em;
    margin-left: 3em;

    }

    .star li:before {
    content: ‘\f006’; /* fa-star */
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: @gray-light;
    }

    .check li:before {
    content: ‘\f00c’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: @gray-light;
    }
    .check-square li:before {
    content: ‘\f046’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: @gray-light;
    }
    .arrow li:before {
    content: ‘\f054’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: @gray-light;
    }
    .arrow-circle li:before {
    content: ‘\f138’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;

    }
    .caret-list li:before {
    content: ‘\f0da’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;

    }
    .caret-square li:before {
    content: ‘\f152’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: @gray-light;
    }
    .comment li:before {
    content: ‘\f075’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: #0074D9;
    }
    .news li:before {
    content: ‘\f1ea’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: #0074D9;
    }
    .calendar li:before {
    content: ‘\f073’;
    font-family: ‘FontAwesome’;
    float: left;
    margin-left: -1.5em;
    color: #0074D9;
    }

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.