FontAwesomeSVG PHP

字体下载 • 2025-07-30

字体很棒的SVG -PHP

可以用来添加字体Awesome 6+的SVG图标的PHP类，而无需JavaScript。

安装

您可以使用作曲家安装它： 

 composer require husseinalhammad/fontawesome-svg

或者，您可以下载FontAwesomeSVG.php文件并手动包含它。

用法

文件

  • 下载字体很棒（免费或专业）
  • 获取文件夹advanced-options/raw-svg并将其放入您的项目中
  • 将svg-with-js/css/fa-svg-with-js添加到您的文档中（或编写您的CSS）

例子

 // $dir = directory where SVG files are
$ FA = new FontAwesomeSVG ( $ dir );

echo $ FA -> get_svg ( ' fa-solid fa-file ' );

添加自定义类： 

 echo $ FA -> get_svg ( ' fa-solid fa-file ' , [ ' class ' => ' my-custom-class another-class ' ]);

删除默认类.svg-inline--fa ： 

 echo $ FA -> get_svg ( ' fa-solid fa-file ' , [ ' default_class ' => false ]);

更改填充（默认为currentColor ）： 

 echo $ FA -> get_svg ( ' fa-solid fa-file ' , [ ' fill ' => ' #f44336 ' ]);

添加 ： 

 echo $ FA -> get_svg ( ' fa-solid fa-file ' , [ ' title ' => ' My accessible icon ' ]);

一次多个选项： 

 echo $ FA -> get_svg ( ' fa-solid fa-file ' , [
    ' class ' => ' my-custom-class another-class ' ,
    ' default_class ' => false ,
    ' title ' => ' My title ' ,
    ' role ' => ' img ' ,
    ' fill ' => ' #ffffff ' ,
]);

自定义Duotone图标： 

 echo $ FA -> get_svg ( ' fa-duotone fa-laugh-wink ' , [
    ' primary ' => [
        ' fill '    => ' #e64980 ' ,
    ],
    ' secondary ' => [
        ' fill '    => ' #fcc417 ' ,
        ' opacity ' => ' 1 ' ,
    ],
]);
选项这意味着什么
班级将类添加到SVG标签
default_class如果设置为false ，则默认CSS类不会添加到SVG标签中。 DeAfult： true 。
inline_style是否将Duotone样式作为内联样式添加到标签中。 DeAfult： true 。
标题在语义图标的SVG标签中添加</code></td></tr><tr><td> title_id</td><td>将<code>id</code>属性添加到<code><title></code>中，并在SVG标签上添加<code>aria-labelledby</code>具有相同的值</td></tr><tr><td>角色</td><td>SVG标签中<code>role</code>属性的值。默认值： <code>img</code></td></tr><tr><td>充满</td><td>SVG内部<code><path></code>中<code>fill</code>属性的值。默认值： <code>currentColor</code></td></tr><tr><td>基本的</td><td>双酮主要选项（请参见下表）</td></tr><tr><td>次要</td><td>Duotone辅助选项（请参见下表） </td></tr></tbody></table></markdown-accessiblity-table><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Duotone</h2></div><blockquote><p dir="auto">需要<strong>v5.10.0</strong>或更高的v5.10.0和Fontawesome Pro许可证</p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">锋利的</h2></div><blockquote><p dir="auto">需要<strong>v6.4.0</strong>或更高的v6.4.0和Fontawesome Pro许可证</p></blockquote><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fa-sharp fa-light fa-file'); echo $FA->get_svg('fa-sharp fa-regular fa-file'); echo $FA->get_svg('fa-sharp fa-solid fa-file');"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fa-sharp fa-light fa-file</span> '</span> ); <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fa-sharp fa-regular fa-file</span> '</span> ); <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fa-sharp fa-solid fa-file</span> '</span> );</pre></div><div class="markdown-heading" dir="auto"><h3>选项</h3></div><p dir="auto">如果启用了<code>inline_style</code> ，则在<code><svg></code>标签上的内联样式中也使用了<code>fill</code>和<code>opacity</code>的值。</p><markdown-accessiblity-table><table><thead><tr><th>选项</th><th>这意味着什么</th></tr></thead><tbody><tr><td>充满</td><td>SVG内部<code><path></code>中<code>fill</code>属性的值。默认值： <code>currentColor</code></td></tr><tr><td>不透明度</td><td>SVG内部<code><path></code>中<code>opacity</code>属性的值。 </td></tr></tbody></table></markdown-accessiblity-table><div class="markdown-heading" dir="auto"><h3>示例：</h3></div><p dir="auto">单色： </p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fad fa-laugh-wink', [ 'fill' => '#e64980', ]);"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fad fa-laugh-wink</span> '</span> , [ <span class="pl-s">' <span class="pl-s">fill</span> '</span> => <span class="pl-s">' <span class="pl-s">#e64980</span> '</span> , ]);</pre></div><p dir="auto">交换层不透明度： </p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fad fa-laugh-wink', [ 'fill' => '#e64980', 'class' => 'fa-swap-opacity', ]);"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fad fa-laugh-wink</span> '</span> , [ <span class="pl-s">' <span class="pl-s">fill</span> '</span> => <span class="pl-s">' <span class="pl-s">#e64980</span> '</span> , <span class="pl-s">' <span class="pl-s">class</span> '</span> => <span class="pl-s">' <span class="pl-s">fa-swap-opacity</span> '</span> , ]);</pre></div><p dir="auto">具有自定义不透明度的单色： </p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fad fa-laugh-wink', [ 'fill' => '#e64980', 'secondary' => [ 'opacity' => '0.2', ], ]);"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fad fa-laugh-wink</span> '</span> , [ <span class="pl-s">' <span class="pl-s">fill</span> '</span> => <span class="pl-s">' <span class="pl-s">#e64980</span> '</span> , <span class="pl-s">' <span class="pl-s">secondary</span> '</span> => [ <span class="pl-s">' <span class="pl-s">opacity</span> '</span> => <span class="pl-s">' <span class="pl-s">0.2</span> '</span> , ], ]);</pre></div><p dir="auto">自定义颜色和不透明度： </p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fad fa-laugh-wink', [ 'primary' => [ 'fill' => '#e64980', 'opacity' => '0.5', ], 'secondary' => [ 'fill' => '#fcc417', 'opacity' => '1', ], ]);"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fad fa-laugh-wink</span> '</span> , [ <span class="pl-s">' <span class="pl-s">primary</span> '</span> => [ <span class="pl-s">' <span class="pl-s">fill</span> '</span> => <span class="pl-s">' <span class="pl-s">#e64980</span> '</span> , <span class="pl-s">' <span class="pl-s">opacity</span> '</span> => <span class="pl-s">' <span class="pl-s">0.5</span> '</span> , ], <span class="pl-s">' <span class="pl-s">secondary</span> '</span> => [ <span class="pl-s">' <span class="pl-s">fill</span> '</span> => <span class="pl-s">' <span class="pl-s">#fcc417</span> '</span> , <span class="pl-s">' <span class="pl-s">opacity</span> '</span> => <span class="pl-s">' <span class="pl-s">1</span> '</span> , ], ]);</pre></div><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">别名</h2></div><p dir="auto">版本5的简短别名仍得到支持</p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fab fa-twitter'); echo $FA->get_svg('fad fa-file'); echo $FA->get_svg('fal fa-file'); echo $FA->get_svg('far fa-file'); echo $FA->get_svg('fas fa-file'); // And the new shorthands for thin and sharp echo $FA->get_svg('fat fa-file'); // thin echo $FA->get_svg('fasl fa-file'); // sharp-light echo $FA->get_svg('fasr fa-file'); // sharp-regular echo $FA->get_svg('fass fa-file'); // sharp-solid"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fab fa-twitter</span> '</span> ); <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fad fa-file</span> '</span> ); <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fal fa-file</span> '</span> ); <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">far fa-file</span> '</span> ); <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fas fa-file</span> '</span> ); <span class="pl-c">// And the new shorthands for thin and sharp</span> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fat fa-file</span> '</span> ); <span class="pl-c">// thin</span> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fasl fa-file</span> '</span> ); <span class="pl-c">// sharp-light</span> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fasr fa-file</span> '</span> ); <span class="pl-c">// sharp-regular</span> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fass fa-file</span> '</span> ); <span class="pl-c">// sharp-solid</span> </pre></div><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">可访问性</h2></div><p dir="auto">以下基于：</p><ul dir="auto"><li>字体很棒的可访问性文档</li><li>Heather Migliorisi关于CSS-Tricks可访问的SVG的文章</li></ul><div class="markdown-heading" dir="auto"><h3><code>role</code>属性</h3></div><p dir="auto"><code>role="img"</code>默认情况下添加到SVG标签中： </p><div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<svg role="img"></svg>"><pre> <span class="pl-kos"><</span> <span class="pl-ent">svg</span> <span class="pl-c1">role</span> =" <span class="pl-s">img</span> " <span class="pl-kos">></span> <span class="pl-kos"></</span> <span class="pl-ent">svg</span> <span class="pl-kos">></span></pre></div><div class="markdown-heading" dir="auto"><h3> <code><title></code> ， <code>aria-labelledby</code></h3></div><p dir="auto">您可以设置一个<code><title></code> ， <code><title></code>的<code>id</code> ，并且将自动添加<code>aria-labelledby</code>属性： </p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fa-solid fa-file', [ 'title' => 'File', 'title_id' => 'file-id', ]);"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fa-solid fa-file</span> '</span> , [ <span class="pl-s">' <span class="pl-s">title</span> '</span> => <span class="pl-s">' <span class="pl-s">File</span> '</span> , <span class="pl-s">' <span class="pl-s">title_id</span> '</span> => <span class="pl-s">' <span class="pl-s">file-id</span> '</span> , ]);</pre></div><div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<svg aria-labelledby="file-id"> <title id="file-id">File ">
 < svg aria-labelledby =" file-id " >
  < title id =" file-id " > File  title >
 svg >

aria-*属性

您可以将任何ARIA-*属性添加到SVG标签： 

 echo $ FA -> get_svg ( ' fa-solid fa-file ' , [
    ' aria-label ' => ' File ' ,
]);
">
 < svg aria-label =" File " >  svg >

aria-hidden属性

默认情况下， aria-hidden="true"默认为SVG标签，除非设置</code> （和<code>aria-labelledby</code> ）或<code>aria-label</code>设置。 </p><div class="highlight highlight-text-html-php notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="echo $FA->get_svg('fa-solid fa-file');"><pre> <span class="pl-k">echo</span> <span class="pl-s1"><span class="pl-c1">$</span> <span class="pl-c1">FA</span></span> -> <span class="pl-en">get_svg</span> ( <span class="pl-s">' <span class="pl-s">fa-solid fa-file</span> '</span> );</pre></div><div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<svg aria-hidden="true"></svg>"><pre> <span class="pl-kos"><</span> <span class="pl-ent">svg</span> <span class="pl-c1">aria-hidden</span> =" <span class="pl-s">true</span> " <span class="pl-kos">></span> <span class="pl-kos"></</span> <span class="pl-ent">svg</span> <span class="pl-kos">></span></pre></div> </article> <!-- --> <div class="shadow_box bg-white rounded-xl shadow-sm p-8"> <div class="title text-lg"><i class="fa fa-download text-primary mr-2"></i>下载源码</div> <div class="share_box"> <div class="share_item"> <span class="share_list active github"><i class="fa fa-github mr-2 text-xl"></i><a href="https://github.com/husseinalhammad/FontAwesomeSVG-PHP.git" id="btnPos" rel="noreferrer nofollow" target="_blank">从 GitHub 克隆</a></span> </div> </div> <div class="copy_box"> <p>通过命令行克隆项目:</p> <div class="input_box"> <span class="text">git clone https://github.com/husseinalhammad/FontAwesomeSVG-PHP.git</span> <span title="复制" class="copy_btn"></span> </div> </div> </div> </div> <!-- right-aside --> <div class="space-y-8"> <!-- 搜索框（移动端） --> <div class="md:hidden bg-white rounded-xl shadow-sm p-4 mb-8"> <div class="relative"> <input type="text" placeholder="搜索Python文章..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 text-sm"> <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted"> <i class="fa fa-search"></i> </button> </div> </div> <!-- 最新文章 --> <div class="bg-white rounded-xl shadow-sm p-6" style="margin-top: 0;"> <h3 class="text-lg font-bold mb-4 border-b pb-3">相关文章</h3> <div class="space-y-4"> <a href="/download/210184.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20250730/logo_68897c57e8bb51.png" alt="AwesomeBadge"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> AwesomeBadge</h4> <p class="text-sm text-muted mt-1">2025-07-30</p> </div> </a> <a href="/download/210182.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20250730/logo_68897c53892f61.png" alt="wagtail font awesome svg"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> wagtail font awesome svg</h4> <p class="text-sm text-muted mt-1">2025-07-30</p> </div> </a> <a href="/download/210181.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20250730/logo_68897c311bdcd1.png" alt="Light Portal"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> Light Portal</h4> <p class="text-sm text-muted mt-1">2025-07-30</p> </div> </a> <a href="/download/210180.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20250730/logo_68897c4ee25251.png" alt="ex_fontawesome"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> ex_fontawesome</h4> <p class="text-sm text-muted mt-1">2025-07-30</p> </div> </a> </div> </div> <!-- 推荐阅读 --> <div class="bg-white rounded-xl shadow-sm p-6"> <h3 class="text-lg font-bold mb-4 border-b pb-3">推荐阅读</h3> <div class="space-y-4"> <a href="/download/226184.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20260115/logo_69687066211c51.jpg" alt="向上：银河游戏免安装正式版"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> 向上：银河游戏免安装正式版</h4> <p class="text-sm text-muted mt-1">2026-01-23</p> </div> </a> <a href="/download/226185.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20260115/logo_6968706c955e21.jpg" alt="风暴驭使正式中文版"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> 风暴驭使正式中文版</h4> <p class="text-sm text-muted mt-1">2026-01-23</p> </div> </a> <a href="/download/226206.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20260115/logo_696876727dcb61.jpg" alt="冥河：贪婪之刃中文试玩版"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> 冥河：贪婪之刃中文试玩版</h4> <p class="text-sm text-muted mt-1">2026-01-23</p> </div> </a> <a href="/download/226207.html" class="flex group"> <div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-lg overflow-hidden flex items-center justify-center" style="position: relative;"> <div class="lazy-src" lazy-src="https://images.downcodes.com/uploads/20260115/logo_6968767dddbfc1.jpg" alt="超级键盘侠免安装绿色中文版"> </div> </div> <div class="ml-4"> <h4 class="font-medium text-dark group-hover:text-primary transition-colors line-clamp-2"> 超级键盘侠免安装绿色中文版</h4> <p class="text-sm text-muted mt-1">2026-01-23</p> </div> </a> </div> </div> </div> </div> </main> <!-- footer --> <footer class="bg-neutral-800 text-white pt-12 pb-6"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="copyright"> <a href="javascript:void(0)">关于本站</a> |　 <a href="javascript:void(0)">版权声明</a> | <a href="javascript:void(0)">合作联系</a> | <a href="/download/allcategory.html">网站地图</a> |　 <a href="javascript:void(0)">帮助中心</a>　 </div> <p class="text_info">Copyright © 2006-2025 downcodes.com | 联系：ymdowncodes@163.com</p> <p class="text_info">备案:<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2022016001号-1</a> </p> </div> </footer> </body> <script type="text/javascript" src="/index/js/jquery-1.8.3.min.js"></script> <script src="/assets/ymzy/js/index.js"></script> <script src="/assets/ymzy/prism.min.js"></script> <script> // document.querySelectorAll('.copy-btn').forEach(btn => { btn.addEventListener('click', function() { const textElement = this.closest('.code-block').querySelector('.code-body pre code'); const textarea = document.createElement('textarea'); textarea.value = textElement.textContent; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); const originalHTML = this.innerHTML; this.innerHTML = '✓ Copied!'; setTimeout(() => { this.innerHTML = originalHTML; }, 3000); }); }); // document.querySelectorAll('.copy_btn').forEach(btn => { btn.addEventListener('click', function() { const textElement = this.closest('.input_box').querySelector('.text'); const textarea = document.createElement('textarea'); textarea.value = textElement.textContent; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); const originalHTML = this.innerHTML; this.innerHTML = '✓ Copied!'; this.classList.add('copied'); setTimeout(() => { this.innerHTML = originalHTML; this.classList.remove('copied'); }, 3000); }); }); </script> </html>