Font-awesome: Icon request: icon-print-preview

[themiacat]

One for print preview, another for previewing a electronic draft of something that usually does not get printed onto a paper.

Love Font Awesome.

[davegandy]

Have any images to use as an example?

[themiacat]

for previewing before printing.

to preview something that usually does not get printed (i.e. previewing an online survey you've created to see how your users will see them). Or maybe an icon like this

Thanks!

[davegandy]

I'll see if I can get this to read at 14px. I like the idea.

[twisk]

I like the idea of the preview icon (second example): https://f.cloud.github.com/assets/2192887/60616/0a74e4da-5c18-11e2-919c-7e63c821839c.jpg

:+1:

[roelvanduijnhoven]

Could surely use this in my project as well! The icon I use now is not understood by everyone.

[Danthar]

This gets my +1

[TheSisb]

+1 here - kind of surprised this simple icon isn't already part of the package heh

[ruvenss]

:+1:

[scofield-ua]

:+1:

[ruckc]

+1

[stepev]

:+1:

[jhubert]

:+1:

[lorencs]

+1

[hybopressthemes]

+1

[LuisCDias]

+1

[Psychokrameur]

+1

[Slayer95]

+1

[robbytaylor]

+1 for a preview icon

[rmies]

+1

[mansimransingh]

+1

[jkarr]

+1

[enkodellc]

+1

-css hack

.fa-lower-right {
  left: 4px !important;
  top: 2px !important;
}
.fa-upper-left {
  left: -2px !important;
  top: -2px !important;
}

code

        <span class="fa-stack" tooltip="Preview" tooltip-popup-delay="750">
                  <i class="fa fa-search fa-stack-1x fa-lower-right"></i>
                  <i class="fa fa-file-o fa-stack-1x fa-upper-left"></i>
                </span>

[MrLonely14]

+1

[marchrius]

+1 for request and +1 @enkodellc for hack!

Edit: this is my revision of the above code from ernkodellc to fit a width similary to fa-fw
CSS

.fa-lower-right {
    left: 6px !important;
    top: -10px !important;
}
.fa-upper-left {
    left: 0px !important;
    top: -12px !important;
}
.fa-stack-15x {
    font-size: 1.5em;
}

.fa-stack-15 {
    height: inherit;
}

HTML

<span class="fa-stack fa-stack-15" tooltip="Info utente" tooltip-popup-delay="750">
<i class="fa fa-search fa-stack-1x fa-lower-right"></i>
<i class="fa fa-file-o fa-stack-2x fa-stack-15x fa-upper-left"></i>
</span>

[zendre4]

+1

[balasankarc]

@davegandy Hi, just a reminder about this issue. Any idea when this will get implemented?

[Sayant]

+1 - This is almost three years old now, but I still need it today.

I need an icon to indicate a "quick view" on a document versus opening it in a new page, and don't see anything existing that will fit.

Use cases:

• To explicitly indicate that the user can preview, or quick-view on an item to see data
• Can also be used as a "print preview" icon, or "details" icon
• Attach a single color image or two that represent the idea you're going for.

[irman]

+1

[zackirby]

+1
Seems like a pretty basic web application icon. I agree with @Sayant's example.

[marcintabaka]

+1

[jacobherrera]

+1

[behram]

:+1:

[pitus]

+1

[sanek4life]

+1

[kiran-aghor]

+1

[adil9]

+1

[AlexLomm]

+1

[hackerkid]

+1

[myleshk]

+1

[lrasmus]

+1

[vascop]

+1

[erhanfirat]

+1

[segreyg]

+1

[gvensan]

+1

[CaitlinMurphy]

+1

[ybozhko]

+1

[KazakovVS]

+1

[hicklin-james]

+1

[darrell-aevum]

Almost 5 years later, apparently +1 doesn't mean anything.

[adil9]

@dareel-aevum exactly, I just keep getting notifications of all these +1 for apparent no reason.

[ColdHeat]

I'm amazed that the open source community hasn't simply combined fa-search and fa-file-o into one icon. This is going on 5 years old.

[mervinva]

+1
@davegandy

[Roy-Orbison]

A cheaper workaround that doesn't need extra markup:

.fa-preview:before {
    content: "\f016";
}
.fa-preview:after {
    content: "\f002";
    display: inline-block;
    font-size: 65%;
    margin-left: -22%;
}

Renders as

[sensibleworld]

We added a new print-search icon to the latest Font Awesome Release: https://fontawesome.com/icons/print-search?style=solid

I'll keep this issue open until we get the file-search icon added.

[TimShilov]

And here's my workaround. Maybe someone will like it.
CSS:

.fa-file-preview {
    position: relative;
}

.fa-file-preview:before {
    content: '\f016';
}

.fa-file-preview:after {
    content: '\f002';
    font-size: 0.6em;
    position: absolute;
    top: 0.5em;
    right: -0.1em;
    text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
        0.5px 0.5px #fff, -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff,
        -0.5px 0.5px 0 #fff;
}

HTML:

<i class="fa fa-file-preview"></i>

Renders as:

[sensibleworld]

Okay! We've finally added a file-search icon as well. Check it out here: https://fontawesome.com/icons/file-search?style=solid