Showing posts with label wordpress tricks. Show all posts
Showing posts with label wordpress tricks. Show all posts

Sunday, May 14, 2017

Top 5 Icon Fonts (via CDN) for websites

  6:58 PM            1 comment
On the web we will be seeing different kinds of icons on many websites but many think those icons were designed and kept as images but it is not true, those are just imported from different online libraries. You just need to add the particular class or custom tag provided by the icon pack to view those icons. Today I am going to provide the top 5 icon packs to use on the online. These packs can be used on blogger, wordpress, joomla or in your custom HTML pages.

Installation Process

  1. Choose your icon pack provider
  2. Download the pack or use the CDN link
  3. If you are working in HTML paste the CDN HTML code inside the <head> tag.
  4. Depending on the icon pack choose the desired icon and use the provided syntax to add the icon in your page.

1.Bootstrap Icons

CDN HTML Code:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Syntax:

<span class="glyphicon glyphicon-icon_name"></span>
OR 
<i class="glyphicon glyphicon-icon_name"></i>
All the icons and its names can be found here.
Check examples here.

Example:
See the Pen Bootstrap Icons Example by Harikesh (@harikesh409) on CodePen.


2. Font Awesome

CDN HTML Code:

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

 Syntax:

<span class="fa fa-icon_name"></span>
OR 
<i class="fa fa-icon_name" aria-hidden="true"></i> 

All the icons and its names can be found here.
Check examples here.

Example:
See the Pen Font Aweswome Icons Example by Harikesh (@harikesh409) on CodePen.

3. Foundation Icons


CDN HTML Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />

Syntax: 

<span class="fi-icon_name"></span>
OR 
<i class="fi-icon_name"></i>
All the icons and its names can be found here.
Check examples here.

Example:
See the Pen Foundation Icons Example by Harikesh (@harikesh409) on CodePen.

4. Ionicons


CDN HTML Code:

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />

Syntax: 

<span class="icon ion-icon_name"></span>
OR 
 <i class="icon ion-icon_name"></i>
All the icons and its names can be found here.

Example:
See the Pen Ion Icons Example by Harikesh (@harikesh409) on CodePen.

5.Themify

CDN HTML Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />

Syntax:
<span class="ti-icon_name"></span>
OR 
<i class="ti-icon_name"></i>
All the icons and its names can be found here.

Example:
See the Pen Themify Icons Example by Harikesh (@harikesh409) on CodePen.

Monday, April 22, 2013

How to Install Google+ Comments to Your WordPress Blogs

  4:03 PM            No comments
Everyone knows that Blogger has released Google+ comments option to there blogs. So, if you are using wordpress platform and not blogger dont worry. In this turtorial I will tell you how to add Google+ comments to wordpress .The new Google+ comments is something like Facebook comments. By using of this new Google+ comments on your blog, you can view your blog and Google+ comments, all in one place. Read below to install Google+ comments in WordPress.

Integrating Google+ Comments into WordPress

You can add Google+ comments to not only WordPress blog, but also to any website. Here is quick trick to install Google+ comments system on WordPress blogs.  

In order to install Google+ comments on your wordpress blog manually, You need to add these codes to your theme’s comments.php.
 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div id="plusonecomments" style="width: 600px;height: 300px;"></div> <script type="text/javascript"> window.setTimeoutundefinedfunctionundefined) { var id = 'plusonecomments'; var divWidth = document.getElementByIdundefinedid).offsetWidth; var width = !!divWidth ? Math.minundefineddivWidth, 750) : 600; var url = "<?php the_permalinkundefined); ?>"; var moderationUrl = ""; var moderationMode = "FILTERED_POSTMOD"; gapi.comments.renderundefinedid, { 'href': url, 'first_party_property': 'BLOGGER', 'legacy_comment_moderation_url': moderationUrl, 'view_type': moderationMode, 'width': width }); }, 10); </script>

  • Copy the above code and paste into comments.php.
  • That’s it, You have installed Google+ comments in your WordPress blog.

Install Google+ Comments using WordPress Plugin

Plus One Comments is an only plugin that allows you to show Google+ comments on your WordPress blog. It just replaces the default commenting system to Google+ comments on your WordPress blogs. You just need to upload the plugin to your blog plugin folder and then activate it. Follow the link given below to download Google+ Comment Plugin for WordPress blogs.
  • Download Google+ Comment WordPress Plugin.
  • Once you have installed this Google+ Comments plugin, Your blog is now ready with Google+ commenting system.
Hope this article helped you to show Google+ comments on your WordPress blogs. What’s your view on using Google+ commenting system on blogs? Please feel free to share your view on Google+ comments for WordPress by the comment box below.
Subscribe to: Posts (Atom)