Archived topic

Using Font Awesome icons as links

2 replies · Started by Ángel on March 3, 2016

Viewing posts 1–3 of 3

March 3, 2016 at 5:56 am #176800

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.

March 3, 2016 at 1:10 pm #176871

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 :)

May 25, 2017 at 1:26 pm #324146

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;
}

This archived topic is closed to new replies.

Start building better websites today.