Diff
checker
Text
Text
Images
Documents
Excel
Folders
Legal
Enterprise
Desktop
Pricing
Sign in
Download Diffchecker Desktop
Compare text
Find the difference between two text files
Tools
History
Real-time editor
Hide unchanged lines
Disable line wrap
Layout
Split
Unified
Diff precision
Smart
Word
Char
Syntax highlighting
Choose syntax
Ignore
Transform text
Go to first change
Edit input
Diffchecker Desktop
The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!
Get Desktop
Untitled diff
Created
9 years ago
Diff never expires
Clear
Export
Share
Explain
31 removals
Lines
Total
Removed
Characters
Total
Removed
To continue using this feature, upgrade to
Diff
checker
Pro
View Pricing
109 lines
Copy
41 additions
Lines
Total
Added
Characters
Total
Added
To continue using this feature, upgrade to
Diff
checker
Pro
View Pricing
117 lines
Copy
<style>
<style>
<!--
<!--
.code {margin-bottom: 5px;}
.code {margin-bottom: 5px;}
.fa:before {margin-right: 3px}
.fa:before {margin-right: 3px}
-->
-->
</style>
</style>
<section>
<section>
<header>
<header>
Copy
Copied
Copy
Copied
<h1>
{@title.icons}</h1>
<h1>
{@module.title} -
{@title.icons}</h1>
</header>
</header>
Copy
Copied
Copy
Copied
<article
>
<article
class="content"
>
<header>
<header>
Copy
Copied
Copy
Copied
<h2>{@
css.
icon
.sample}</h2>
<h2>{@
icon
fa
.sample}</h2>
</header>
</header>
Copy
Copied
Copy
Copied
<div
class="content"
>
<div
>
<table>
<table>
Copy
Copied
Copy
Copied
<caption>{@
css.
icon
.social}</caption>
<caption>{@
icon
fa
.social}</caption>
<thead>
<thead>
<tr>
<tr>
Copy
Copied
Copy
Copied
<th>{@
css.
icon
.icon}</th>
<th>{@
icon
fa
.icon}</th>
<th>{@
css.
icon
.name}</th>
<th>{@
icon
fa
.name}</th>
<th>{@
css.
icon
.code}</th>
<th>{@
icon
fa
.code}</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
# START social #
# START social #
<tr>
<tr>
<td><i class="fa fa-{social.FA} fa-lg"></i></td>
<td><i class="fa fa-{social.FA} fa-lg"></i></td>
<td><span>{social.FA}</span></td>
<td><span>{social.FA}</span></td>
<td>{social.BEFORE}</td>
<td>{social.BEFORE}</td>
</tr>
</tr>
# END web #
# END web #
</tbody>
</tbody>
</table>
</table>
<table>
<table>
Copy
Copied
Copy
Copied
<caption>{@
css.
icon
.screen}</caption>
<caption>{@
icon
fa
.screen}</caption>
<thead>
<thead>
<tr>
<tr>
Copy
Copied
Copy
Copied
<th>{@
css.
icon
.icon}</th>
<th>{@
icon
fa
.icon}</th>
<th>{@
css.
icon
.name}</th>
<th>{@
icon
fa
.name}</th>
<th>{@
css.
icon
.code}</th>
<th>{@
icon
fa
.code}</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
# START responsive #
# START responsive #
<tr>
<tr>
<td><i class="fa fa-{responsive.FA} fa-lg"></i></td>
<td><i class="fa fa-{responsive.FA} fa-lg"></i></td>
<td><span>{responsive.FA}</span></td>
<td><span>{responsive.FA}</span></td>
<td>{responsive.BEFORE}</td>
<td>{responsive.BEFORE}</td>
</tr>
</tr>
# END responsive #
# END responsive #
</tbody>
</tbody>
</table>
</table>
</div>
</div>
Copy
Copied
Copy
Copied
<footer>{@
css.
icon
.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/cheatsheet/" title="Font-Awesome">Cheatsheet Font-Awesome</a></footer>
<footer>{@
icon
fa
.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/cheatsheet/" title="Font-Awesome">Cheatsheet Font-Awesome</a></footer>
</article>
</article>
<article>
<article>
<header>
<header>
Copy
Copied
Copy
Copied
<h2>{@
css.
icon
.howto}</h2>
<h2>{@
icon
fa
.howto}</h2>
</header>
</header>
<div class="content">
<div class="content">
Copy
Copied
Copy
Copied
<p>{@
css.
icon
.howto.explain}</p>
<p>{@
icon
fa
.howto.explain}</p>
<p>{@
css.
icon
.howto.update}</p>
<p>{@
icon
fa
.howto.update}</p>
<br />
<br />
Copy
Copied
Copy
Copied
<h3>{@
css.
icon
.howto.html}</h3>
<h3>{@
icon
fa
.howto.html}</h3>
<p>{@
css.
icon
.howto.html.class}</p>
<p>{@
icon
fa
.howto.html.class}</p>
<div class="code">
<div class="code">
<pre><span><</span><span>i class="fa fa-edit"><</span>/i> Edition</pre>
<pre><span><</span><span>i class="fa fa-edit"><</span>/i> Edition</pre>
</div>
</div>
Copy
Copied
Copy
Copied
<p>{@
css.
icon
.howto.html.class.result.i}<i class="fa fa-edit"></i> Edition</p>
<p>{@
icon
fa
.howto.html.class.result.i}<i class="fa fa-edit"></i> Edition</p>
<div class="code">
<div class="code">
<pre><span><</span>a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost<<span>/a></span></pre>
<pre><span><</span>a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost<<span>/a></span></pre>
</div>
</div>
Copy
Copied
Copy
Copied
<p>{@
css.
icon
.howto.html.class.result.a}<a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost</a></p>
<p>{@
icon
fa
.howto.html.class.result.a}<a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost</a></p>
<p>{@
css.
icon
.howto.html.class.result.all}</p>
<p>{@
icon
fa
.howto.html.class.result.all}</p>
<br />
<br />
Copy
Copied
Copy
Copied
<h3>{@
css.
icon
.howto.css}</h3>
<h3>{@
icon
fa
.howto.css}</h3>
<p>{@
css.
icon
.howto.css.class}</p>
<p>{@
icon
fa
.howto.css.class}</p>
<span class="formatter-code">{@
css.
icon
.howto.css.css.code}</span>
<span class="formatter-code">{@
icon
fa
.howto.css.css.code}</span>
<div class="code">
<div class="code">
<pre>.success { ... }<br /><br />.success::before {<br /> content: "\f00c";<br /> font-family: FontAwesome; <br />}</pre>
<pre>.success { ... }<br /><br />.success::before {<br /> content: "\f00c";<br /> font-family: FontAwesome; <br />}</pre>
</div>
</div>
Copy
Copied
Copy
Copied
<span class="formatter-code">{@
css.
icon
.howto.css.html.code}</span>
<span class="formatter-code">{@
icon
fa
.howto.css.html.code}</span>
<div class="code">
<div class="code">
Copy
Copied
Copy
Copied
<pre><
span>div class="success">{@css.message
_
success}<<span>/div></span></pre>
<pre><
<
span>div class="success">{@css.message
.
success}<<span>/div></span></pre>
</div>
</div>
Copy
Copied
Copy
Copied
<div class="success">{@css.message
_
success}</div>
<div class="success">{@css.message
.
success}</div>
<br />
<br />
Copy
Copied
Copy
Copied
<h3>{@
css.icon.
howto.variants}</h3>
<h3>{@
iconfa.howto.bbcode}</h3>
<p>{@
css.
icon
.howto.variants.explain}</p>
<p>{@iconfa.howto.bbcode.some.icons} <i class="fa fa-flag-o"></i></p>
<p>{@
css.
icon
.howto.variants.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/examples/">Font-Awesome/examples</a></p>
<p>{@iconfa.howto.bbcode.tag}</p>
<p>{@iconfa.howto.bbcode.icon.name}</p>
<p>{@iconfa.howto.bbcode.icon.test} <i class="fa fa-cubes"></i></p>
<p>{@iconfa.howto.bbcode.icon.variants}</p>
<br />
<h3>{@iconfa.
howto.variants}</h3>
<p>{@
icon
fa
.howto.variants.explain}</p>
<p>{@
icon
fa
.howto.variants.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/examples/">Font-Awesome/examples</a></p>
<div class="code">
<div class="code">
Copy
Copied
Copy
Copied
<pre><<span>i class="fa fa-spinner fa-
pulse
fa-2x><</span>/i></pre>
<pre><<span>i class="fa fa-spinner fa-
spin
fa-2x><</span>/i></pre>
</div>
</div>
Copy
Copied
Copy
Copied
<p>{@
css.
icon
.howto.variants.spinner}<i class="fa fa-spinner fa-
pulse
fa-2x"></i></p>
<p>{@
icon
fa
.howto.variants.spinner}<i class="fa fa-spinner fa-
spin
fa-2x"></i></p>
</div>
</div>
</article>
</article>
<footer></footer>
<footer></footer>
</section>
</section>
Saved diffs
Original text
Open file
<style> <!-- .code {margin-bottom: 5px;} .fa:before {margin-right: 3px} --> </style> <section> <header> <h1>{@title.icons}</h1> </header> <article> <header> <h2>{@css.icon.sample}</h2> </header> <div class="content"> <table> <caption>{@css.icon.social}</caption> <thead> <tr> <th>{@css.icon.icon}</th> <th>{@css.icon.name}</th> <th>{@css.icon.code}</th> </tr> </thead> <tbody> # START social # <tr> <td><i class="fa fa-{social.FA} fa-lg"></i></td> <td><span>{social.FA}</span></td> <td>{social.BEFORE}</td> </tr> # END web # </tbody> </table> <table> <caption>{@css.icon.screen}</caption> <thead> <tr> <th>{@css.icon.icon}</th> <th>{@css.icon.name}</th> <th>{@css.icon.code}</th> </tr> </thead> <tbody> # START responsive # <tr> <td><i class="fa fa-{responsive.FA} fa-lg"></i></td> <td><span>{responsive.FA}</span></td> <td>{responsive.BEFORE}</td> </tr> # END responsive # </tbody> </table> </div> <footer>{@css.icon.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/cheatsheet/" title="Font-Awesome">Cheatsheet Font-Awesome</a></footer> </article> <article> <header> <h2>{@css.icon.howto}</h2> </header> <div class="content"> <p>{@css.icon.howto.explain}</p> <p>{@css.icon.howto.update}</p> <br /> <h3>{@css.icon.howto.html}</h3> <p>{@css.icon.howto.html.class}</p> <div class="code"> <pre><span><</span><span>i class="fa fa-edit"><</span>/i> Edition</pre> </div> <p>{@css.icon.howto.html.class.result.i}<i class="fa fa-edit"></i> Edition</p> <div class="code"> <pre><span><</span>a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost<<span>/a></span></pre> </div> <p>{@css.icon.howto.html.class.result.a}<a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost</a></p> <p>{@css.icon.howto.html.class.result.all}</p> <br /> <h3>{@css.icon.howto.css}</h3> <p>{@css.icon.howto.css.class}</p> <span class="formatter-code">{@css.icon.howto.css.css.code}</span> <div class="code"> <pre>.success { ... }<br /><br />.success::before {<br /> content: "\f00c";<br /> font-family: FontAwesome; <br />}</pre> </div> <span class="formatter-code">{@css.icon.howto.css.html.code}</span> <div class="code"> <pre><span>div class="success">{@css.message_success}<<span>/div></span></pre> </div> <div class="success">{@css.message_success}</div> <br /> <h3>{@css.icon.howto.variants}</h3> <p>{@css.icon.howto.variants.explain}</p> <p>{@css.icon.howto.variants.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/examples/">Font-Awesome/examples</a></p> <div class="code"> <pre><<span>i class="fa fa-spinner fa-pulse fa-2x><</span>/i></pre> </div> <p>{@css.icon.howto.variants.spinner}<i class="fa fa-spinner fa-pulse fa-2x"></i></p> </div> </article> <footer></footer> </section>
Changed text
Open file
<style> <!-- .code {margin-bottom: 5px;} .fa:before {margin-right: 3px} --> </style> <section> <header> <h1>{@module.title} - {@title.icons}</h1> </header> <article class="content"> <header> <h2>{@iconfa.sample}</h2> </header> <div> <table> <caption>{@iconfa.social}</caption> <thead> <tr> <th>{@iconfa.icon}</th> <th>{@iconfa.name}</th> <th>{@iconfa.code}</th> </tr> </thead> <tbody> # START social # <tr> <td><i class="fa fa-{social.FA} fa-lg"></i></td> <td><span>{social.FA}</span></td> <td>{social.BEFORE}</td> </tr> # END web # </tbody> </table> <table> <caption>{@iconfa.screen}</caption> <thead> <tr> <th>{@iconfa.icon}</th> <th>{@iconfa.name}</th> <th>{@iconfa.code}</th> </tr> </thead> <tbody> # START responsive # <tr> <td><i class="fa fa-{responsive.FA} fa-lg"></i></td> <td><span>{responsive.FA}</span></td> <td>{responsive.BEFORE}</td> </tr> # END responsive # </tbody> </table> </div> <footer>{@iconfa.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/cheatsheet/" title="Font-Awesome">Cheatsheet Font-Awesome</a></footer> </article> <article> <header> <h2>{@iconfa.howto}</h2> </header> <div class="content"> <p>{@iconfa.howto.explain}</p> <p>{@iconfa.howto.update}</p> <br /> <h3>{@iconfa.howto.html}</h3> <p>{@iconfa.howto.html.class}</p> <div class="code"> <pre><span><</span><span>i class="fa fa-edit"><</span>/i> Edition</pre> </div> <p>{@iconfa.howto.html.class.result.i}<i class="fa fa-edit"></i> Edition</p> <div class="code"> <pre><span><</span>a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost<<span>/a></span></pre> </div> <p>{@iconfa.howto.html.class.result.a}<a class="fa fa-globe" href="http://www.phpboost.com">PHPBoost</a></p> <p>{@iconfa.howto.html.class.result.all}</p> <br /> <h3>{@iconfa.howto.css}</h3> <p>{@iconfa.howto.css.class}</p> <span class="formatter-code">{@iconfa.howto.css.css.code}</span> <div class="code"> <pre>.success { ... }<br /><br />.success::before {<br /> content: "\f00c";<br /> font-family: FontAwesome; <br />}</pre> </div> <span class="formatter-code">{@iconfa.howto.css.html.code}</span> <div class="code"> <pre><<span>div class="success">{@css.message.success}<<span>/div></span></pre> </div> <div class="success">{@css.message.success}</div> <br /> <h3>{@iconfa.howto.bbcode}</h3> <p>{@iconfa.howto.bbcode.some.icons} <i class="fa fa-flag-o"></i></p> <p>{@iconfa.howto.bbcode.tag}</p> <p>{@iconfa.howto.bbcode.icon.name}</p> <p>{@iconfa.howto.bbcode.icon.test} <i class="fa fa-cubes"></i></p> <p>{@iconfa.howto.bbcode.icon.variants}</p> <br /> <h3>{@iconfa.howto.variants}</h3> <p>{@iconfa.howto.variants.explain}</p> <p>{@iconfa.howto.variants.list}<a class="basic-button" href="https://fortawesome.github.io/Font-Awesome/examples/">Font-Awesome/examples</a></p> <div class="code"> <pre><<span>i class="fa fa-spinner fa-spin fa-2x><</span>/i></pre> </div> <p>{@iconfa.howto.variants.spinner}<i class="fa fa-spinner fa-spin fa-2x"></i></p> </div> </article> <footer></footer> </section>
Find difference