Font Awesome Icons

13142535-cascading-style-sheets-3d-sphere-on-white-background
Font Awesome is literally awesome!
It allows you to add hundreds of icons on your web page.
These icons are not images therefore flexible in setting its sizes and it is totally responsive.

For instance, you can add a “link” icon in front of any external URLs like this:

http://www.yourURL.com

<i class="fa fa-link"></i> www.yourURL.com

Here’s how you can use the Font Awesome icons:
This is the simplest way to do this, calling it into your HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Here is the link to over 400 icons you can use: http://fortawesome.github.io/Font-Awesome/icons/

Here’s Font Awesome website:

Font Awesome, the iconic font and CSS toolkithttp://fortawesome.github.io/Font-Awesome/Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

You can also apply style:

http://www.yourURL.com

Place the icon in a background circle:
http://www.yourURL.com

Here’s the code for that:

<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" style="color: #cc0000;"></i>
<i class="fa fa-link fa-stack-1x fa-inverse"></i></span>http://www.yourURL.com

WordPress TIP

In WordPress Text mode, make sure your code is all in one line. Otherwise it will insert line breaks in your HTML.

Posted in CSS/HTML Tagged with: ,

Form Detail

One of my pet peeves is when Arial/Helvetica fonts show up in un-styled form input fields.

It is part of the web page and all the hard work a designer/developer puts into coding a beautiful desktop version CSS, the form fields are left out more times than you would think.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, 
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
 nav, output, ruby, section, summary, time, mark, audio, video, input {
	border: 0;
	font-size: 100%;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

Example above sure looks like it is covering all of the selectors but simply adding the following will apply your style to the form fields as well. Simple.

  • input
  • select
  • textarea
Posted in CSS/HTML Tagged with:

Facebook Style Link Plugin

wordpress-logo-stacked-rgb

Do you like the nifty way Facebook displays an external link with a thumbnail, title and a bit of description?

facebooklink

There’s a plugin for that.

It is  WP Lynx plug in and here’s the developer’s page:  http://mtekk.us/code/wp-lynx/

QnB’s experience with the plugin:

  • Admin side setting offers some control but not a lot
  • To update/modify the look and feel, edit “wp_lynx_style.min.css” in the plugin folder
  • It’s very similar to how Facebook renders the link, you can choose a thumbnail, change the length of the description and such
  • Not responsive

Check it out and download: https://wordpress.org/plugins/wp-lynx/

See it in action.

WP Lynx | mtekk's Crib

WP Lynx | mtekk’s Cribhttp://mtekk.us/code/wp-lynx/Sick of the same old boring links? Want to mimic Facebook’s wall links in your WordPress posts? WP Lynx allows you to do just that.
Posted in WordPress Tagged with: