How to remove or change font awesome icons on portfolio overlay

If you’re like me, you may not want to have a popup lightbox, but just 1 overlay icon link to your portfolio item details. You can modify a core TLP-Portfolio plugin file for a quick hack, but this is not a permanent fix. FYI: If you run a plugin update and don’t save off your modified file, you may have to re-do this.

I wish this plugin would let you save off plugin template files into your theme structure, but alas, until it does, this is my little fix…

1. Download the plugin files to your computer
2. Open tlp-portfolio/lib/classes/TLPportShortCode.php
3. There are 4 areas you can change concerning the overlay icon, though you only need to for the layout you’re using. I’m using Isotope, so scroll to lines 320 – 321. If you’re using a different one of the layouts, search for fa fa-search-plus in the file and watch to see if the code you find says templateOne, templateTwo, or templateThree.

$html .= '<a class="tlp-zoom" href="' . $imgFull . '"><i class="fa fa-search-plus"></i></a>';
$html .= '<a target="_blank" href="' . $plink . '"><i class="fa fa-external-link"></i></a>';

The first line is the icon to click and open lightbox.
The second is to click and view the full portfolio item.

4. Remove line 320.
5. If you don’t want to modify or resize the icon on line 321 (which is now line 320), save and upload the file over the old one, then reload your portfolio to check.
6. If you do want to edit the icon and icon size on our new line 320, open https://fontawesome.com and click on “Icons” on the top nav.

TLP-Portfolio uses Font Awesome for the icon overlays.

7. I wanted a right arrow so I searched “right arrow”. Search for whatever icon type you want.
8. Copy the code at the top that will look like this: <i class="fas fa-arrow-circle-right"></i>
9. Replace the icon code on our new line 320 with yours. Now it should look like this: <a target="_blank" href="' . $plink . '"><i class="fas fa-arrow-circle-right"></i></a>
10. If you want the icon bigger, add the Font Awesome fa-xx size class. They have it up to 5x. Like this: <a target="_blank" href="' . $plink . '"><i class="fas fa-arrow-circle-right fa-4x"></i></a>
11. Save off the file and upload it to your site.
12. PLEASE NOTE: You will need to update your CSS if you enlarged your overlay icon. The CSS has a fixed width and height and so your alignment of your overlay icon will now be off.
13. Open your theme’s CSS file (or internal CSS in your theme options in Dashboard) and simply put this CSS in and save:

.tlp-portfolio .tlp-layout-isotope .tlp-overlay .link-icon a {
  width: 100px;
  height: 100px;
}

This is CSS for a 4x sized icon. You’ll need to size the width and height up or down and retest until you like it.

Now you’ll have 1 icon overley in the middle of your portfolio thumbnail that will open your actual portfolio item. No lightbox. And, this will look fine on any screen size. Cheers.