{"id":1052,"date":"2021-03-01T08:30:00","date_gmt":"2021-03-01T00:30:00","guid":{"rendered":"https:\/\/\/?p=1052"},"modified":"2022-01-16T15:15:07","modified_gmt":"2022-01-16T07:15:07","slug":"btn-with-font-awesome","status":"publish","type":"post","link":"https:\/\/\/btn-with-font-awesome\/","title":{"rendered":"Font Awesome \u6559\u5b78-Icon\u5716\u793a\u53d6\u4ee3\u6587\u5b57\u7684\u6309\u9215"},"content":{"rendered":"\n<p>\u5927\u90e8\u5206\u7cfb\u7d71\u8a2d\u8a08\u6642\u7684\u6309\u9215\u9084\u662f\u4ee5\u6587\u5b57\u70ba\u4e3b\uff0c\u539f\u56e0\u662f\u907f\u514d\u64cd\u4f5c\u7684\u4eba\u8aa4\u6703\u5716\u793a\u7684\u610f\u7fa9\uff0c\u5c24\u5176\u5728\u6e38\u6a19\u79fb\u5230\u6309\u9215\u4e0a\u6642\u6c92\u6709\u986f\u793a\u8a3b\u89e3\u6587\u5b57\uff0c\u64cd\u4f5c\u5931\u8aa4\u9020\u6210\u7684\u5f8c\u679c\u80af\u5b9a\u7121\u6cd5\u60f3\u50cf\uff01<\/p>\n\n\n\n<p>\u4e0d\u904e\u6709\u6b21\u4e3b\u7ba1\u5247\u662f\u5e0c\u671b\u6211\u628a\u6700\u7c21\u55ae\u3001\u4e0d\u6703\u8aa4\u6703\u7684\u6309\u9215\uff0c\u6539\u6210\u5716\u793a\uff0c\u4f8b\u5982<strong>\u300c\u641c\u5c0b\u300d\u6309\u9215\u7528\u653e\u5927\u93e1<\/strong>\uff1b\u300c\u522a\u9664\u300d\u5c31\u7528\u5783\u573e\u6876\u5716\u793a\u986f\u793a\u3002<\/p>\n\n\n\n<p>\u9019\u7a2e\u4f9d\u7167\u76ee\u524d\u7d55\u5927\u591a\u6578\u7684\u4f7f\u7528\u7fd2\u6163\u4f86\u8aaa\uff0c\u5df2\u7d93\u5e7e\u4e4e\u4e0d\u6703\u7406\u89e3\u932f\u8aa4\u4e86\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u7528\u5716\u793a\u53d6\u4ee3\u6587\u5b57\u5466\uff01<\/p>\n\n\n\n<p>\u4f46\u50cf\u662f\u65b0\u589e\u3001\u9078\u64c7\u3001\u5168\u9078\u7b49\uff0c\u6709\u6642\u5019\u5716\u793a\u9078\u5f97\u4e0d\u5920\u7cbe\u78ba\uff0c\u52a0\u4e0a\u4e26\u6392\u986f\u793a\u6642\u6703\u4e0d\u592a\u6e05\u695a\uff0c\u9019\u6642\u5019<strong>\u5982\u679c\u4f7f\u7528\u8005\u56e0\u70ba\u6015\u6309\u932f\u800c\u7522\u751f\u7591\u60d1\uff0c\u5c31\u5f88\u660e\u986f\u8868\u793a\u9019\u500b\u5716\u793a\u6309\u9215\u7d55\u5c0d\u662f\u8a2d\u8a08\u4e0d\u826f\u56c9\uff01<\/strong><\/p>\n\n\n\n<p>\u9019\u7bc7\u5c31\u4f86\u6559\u4f60\u5982\u4f55\u5c07\u6587\u5b57\u985e\u578b\u7684\u6309\u9215\uff0c\u900f\u904eFont Awesome\u4f86\u6539\u6210\u5716\u793a\u985e\u578b\u7684\u6309\u9215\u5427\uff01<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_64 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\">\u5167\u5bb9\u76ee\u9304<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6613096390c0b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6613096390c0b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=/index.html"https:\/\/\/btn-with-font-awesome\/#%E6%8C%89%E9%88%95%E5%9F%BA%E6%9C%AC%E6%A8%A3%E5%BC%8F%E8%A3%BD%E4%BD%9C\" title=\"\u6309\u9215\u57fa\u672c\u6a23\u5f0f\u88fd\u4f5c\">\u6309\u9215\u57fa\u672c\u6a23\u5f0f\u88fd\u4f5c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=/index.html"https:\/\/\/btn-with-font-awesome\/#%E5%A6%82%E4%BD%95%E5%B5%8C%E5%85%A5Font_Awesome%E5%9C%96%E7%A4%BA\" title=\"\u5982\u4f55\u5d4c\u5165Font Awesome\u5716\u793a\">\u5982\u4f55\u5d4c\u5165Font Awesome\u5716\u793a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=/index.html"https:\/\/\/btn-with-font-awesome\/#Font_Awesome%E5%9C%96%E7%A4%BA%E5%AF%A6%E4%BD%9C%E6%AD%A5%E9%A9%9F\" title=\"Font Awesome\u5716\u793a\u5be6\u4f5c\u6b65\u9a5f\">Font Awesome\u5716\u793a\u5be6\u4f5c\u6b65\u9a5f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=/index.html"https:\/\/\/btn-with-font-awesome\/#%E4%BF%AE%E6%AD%A3Font_Awesome%E5%9C%96%E7%A4%BA%E8%88%87%E6%8C%89%E9%88%95\" title=\"\u4fee\u6b63Font Awesome\u5716\u793a\u8207\u6309\u9215\">\u4fee\u6b63Font Awesome\u5716\u793a\u8207\u6309\u9215<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=/index.html"https:\/\/\/btn-with-font-awesome\/#%E7%B8%BD%E7%B5%90\" title=\"\u7e3d\u7d50\">\u7e3d\u7d50<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E6%8C%89%E9%88%95%E5%9F%BA%E6%9C%AC%E6%A8%A3%E5%BC%8F%E8%A3%BD%E4%BD%9C\"><\/span>\u6309\u9215\u57fa\u672c\u6a23\u5f0f\u88fd\u4f5c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u9019\u908a\u5c31\u4ee5\u300c\u641c\u5c0b\u300d\u6309\u9215\u70ba\u4f8b\uff0c\u6211\u5011\u5148\u628a\u6587\u5b57\u985e\u578b\u6309\u9215\u5b8c\u6210\u5427\uff01<\/p>\n\n\n\n<p>HTML\u90e8\u5206\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- HTML --&gt;<\/span>\n\n&lt;div&gt;\u9019\u662f\u539f\u672c\u6309\u9215\u6a23\u5f0f&lt;\/div&gt;\n&lt;div class=\"btnI1\"&gt;\n    &lt;input type=\"button\" value=\"\u641c\u5c0b\" class=\"ctrlbutton\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>CSS\u90e8\u5206\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">\/* CSS *\/\n\n\/* \u6309\u9215\u7f8e\u5316\u57fa\u672c\u6a23\u5f0f\u8abf\u6574 *\/<\/span>\n.ctrlbutton {\n    display: inline-block;\n    margin: 5px 3px;\n    font-weight: 400;\n    text-align: left;\n    white-space: nowrap;\n    vertical-align: middle;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    padding: 2px 13px;\n    font-size: 14px;\n    line-height: 30px;\n    min-height: 35px;\n    border-radius: 2px;\n    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n    color: #ffffff;\n    background-color: rgb(148, 190, 214);\n    border-radius: 8px;\n    cursor: pointer;\n    letter-spacing: 2px;\n    box-shadow: 2px 2px 3px grey;\n    border: none;\n    padding-right: 11px;\n}\n\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* \u6e38\u6a19\u79fb\u52d5\u5230\u6309\u9215\u4e0a\u6642\u7684\u6a23\u5f0f\u8b8a\u5316 *\/<\/span>\n.ctrlbutton:hover {\n    color: white;\n    box-shadow: none;\n    border: none;\n    background-color: rgb(124, 170, 195);\n}<\/code><\/pre>\n\n\n\n<p>\u4ee5\u4e0a\u7a0b\u5f0f\u78bc\u5b8c\u6210\u6a23\u5f0f\u5982\u4e0b\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"184\" height=\"100\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/btn_search_reg.png?resize=184%2C100&#038;ssl=1\" alt=\"search button\u539f\u59cb\u6a23\u5f0f\" class=\"wp-image-1102\" title=\"search button\u539f\u59cb\u6a23\u5f0f\" data-recalc-dims=\"1\"\/><figcaption>search button\u539f\u59cb\u6a23\u5f0f<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u63a5\u4e0b\u4f86\u6211\u5011\u5c07Font Awesome\u63d2\u5165\u6211\u5011\u7684\u7db2\u7ad9\uff0c<br>\u4e26\u4e14\u4f7f\u7528\u5b83\u3002<\/p>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E5%A6%82%E4%BD%95%E5%B5%8C%E5%85%A5Font_Awesome%E5%9C%96%E7%A4%BA\"><\/span>\u5982\u4f55\u5d4c\u5165Font Awesome\u5716\u793a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u53ef\u4ee5\u5230Google\u700f\u89bd\u5668\u76f4\u63a5\u641c\u5c0b\uff0c\u8f38\u5165\u300cfont awesome cdn\u300d\uff0c\u7b2c\u4e00\u500b\u770b\u5230\u300cSetup Webfont with CDN | Font Awesome\u300d\u5c31\u662f\u4e86\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"633\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_cdn.png?resize=1024%2C633&#038;ssl=1\" alt=\"Font Awesome CDN\" class=\"wp-image-1096\" title=\"Font Awesome CDN\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_cdn.png?resize=1024%2C633&amp;ssl=1 1024w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_cdn.png?resize=300%2C186&amp;ssl=1 300w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_cdn.png?resize=768%2C475&amp;ssl=1 768w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_cdn.png?w=1062&amp;ssl=1 1062w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome CDN<\/figcaption><\/figure>\n\n\n\n<p>\u88dc\u5145\uff1a<br>cdn\u7684\u610f\u601d\u5c31\u662f\u53ea\u8981\u7528\u4e00\u884c\u7a0b\u5f0f\u78bc\u5d4c\u5165\uff0c\u4f60\u5c31\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u7db2\u7ad9\u4e0a\u7684\u5167\u5bb9\u4e86\u3002<\/p>\n\n\n\n<p>\u6240\u4ee5\u6211\u5011\u9032\u5165\u7db2\u9801\u5f8c\u5411\u4e0b\u6372\u52d5\uff0c<strong>\u5c0b\u627e\u5230cdn\u5340\u584a\u4e2d\u6709&lt;link&gt;\u6a19\u7c64\u958b\u982d\u7684\uff0c<\/strong>\u5c31\u662f\u6211\u5011\u8981\u627e\u51fa\u4f86<strong>\u8907\u88fd\u653e\u9032\u6211\u5011\u7a0b\u5f0f\u78bc<\/strong>\u7684\u5167\u5bb9\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"239\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/cdn.png?resize=1024%2C239&#038;ssl=1\" alt=\"Font Awesome CDN\" class=\"wp-image-1101\" title=\"Font Awesome CDN\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/cdn.png?resize=1024%2C239&amp;ssl=1 1024w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/cdn.png?resize=300%2C70&amp;ssl=1 300w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/cdn.png?resize=768%2C179&amp;ssl=1 768w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/cdn.png?w=1411&amp;ssl=1 1411w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome CDN<\/figcaption><\/figure>\n\n\n\n<p>\u65bc\u662f\u8907\u88fd\u9019\u884c\u4e4b\u5f8c\uff0c\u56de\u5230\u6211\u5011<strong>HTML\u7684&lt;head&gt;\u8207&lt;\/head&gt;\u6a19\u7c64\u4e4b\u9593\u8cbc\u4e0a<\/strong>\uff0c\u8cbc\u4e0a\u7bc4\u4f8b\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- HTML --&gt;<\/span>\n<span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- \u7d05\u8272\u5b57\u9ad4\u70ba\u4fee\u6539\u7684\u5167\u5bb9 --&gt;<\/span>\n\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;title&gt;test&lt;\/title&gt;\n\n    <span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- \u5728\u9019\u88e1\u8cbc\u4e0a --&gt;<\/span>\n    <span class=\"has-inline-color has-vivid-red-color\">&lt;link rel=\"stylesheet\" href=/index.html"https:\/\/pro.fontawesome.com\/releases\/v5.10.0\/css\/all.css\" integrity=\"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p\" crossorigin=\"anonymous\"\/&gt;<\/span>\n\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=/index.html"Style1.css\" \/&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>\u9019\u6a23\u5c31\u53ef\u4ee5\u958b\u59cb\u4f7f\u7528\u56c9\uff01<\/p>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"Font_Awesome%E5%9C%96%E7%A4%BA%E5%AF%A6%E4%BD%9C%E6%AD%A5%E9%A9%9F\"><\/span>Font Awesome\u5716\u793a\u5be6\u4f5c\u6b65\u9a5f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u63a5\u4e0b\u4f86\uff0c\u6211\u5011\u524d\u5f80Font Awesome\u627e\u5c0b\u6211\u5011\u8981\u7684icon\uff0cFont Awesome\u7db2\u7ad9\u9023\u7d50\uff1a<a href=/index.html"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/fontawesome.com\/<\/a><\/p>\n\n\n\n<p>\u9032\u5165\u7db2\u7ad9\u5f8c\u4e0a\u65b9\u5c0e\u89bd\u5217\u9ede\u9078\u300cIcons\u300d\u9801\u7c64\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_icons.png?resize=1024%2C576&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" class=\"wp-image-1105\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_icons.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_icons.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_icons.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_icons.png?w=1276&amp;ssl=1 1276w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f<\/figcaption><\/figure>\n\n\n\n<p>\u9019\u6642\u5019\u5c31\u53ef\u4ee5\u770b\u5230\u597d\u591a\u73fe\u6709\u7684icons\u4f9b\u4f60\u9078\u64c7\uff0c<strong>\u9084\u53ef\u4ee5\u76f4\u63a5\u641c\u5c0b\u60f3\u8981\u7684icon\u5662\uff01<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_loticons.png?resize=1024%2C491&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" class=\"wp-image-1107\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_loticons.png?resize=1024%2C491&amp;ssl=1 1024w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_loticons.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_loticons.png?resize=768%2C369&amp;ssl=1 768w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_loticons.png?resize=1536%2C737&amp;ssl=1 1536w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_loticons.png?w=1815&amp;ssl=1 1815w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f<\/figcaption><\/figure>\n\n\n\n<p>\u6211\u5011\u76f4\u63a5\u641c\u5c0b\u300c\u641c\u5c0b\u300d\u7684\u95dc\u9375\u5b57\u300csearch\u300d\uff0c\u5c31\u6703\u767c\u73fe\u6709\u5f88\u591a\u653e\u5927\u93e1\u76f8\u95dc\u7684\u5716\u793a\u51fa\u73fe\u3002<\/p>\n\n\n\n<p>\u9019\u908a\u5c0f\u63d0\u9192\uff0c\u6e38\u6a19\u79fb\u5230\u5716\u793a\u4e0a\u6642\uff0c\u5982\u679c\u53f3\u4e0a\u89d2\u6709\u300cPRO\u300d\u5b57\u6a23\u8868\u793a\u662f\u8981\u4ed8\u8cbb\u624d\u80fd\u4f7f\u7528\u7684\u5466\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"709\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_search-1.png?resize=691%2C709&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" class=\"wp-image-1109\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_search-1.png?w=691&amp;ssl=1 691w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_search-1.png?resize=292%2C300&amp;ssl=1 292w\" sizes=\"(max-width: 691px) 100vw, 691px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f<\/figcaption><\/figure>\n\n\n\n<p>\u56e0\u6b64\u9019\u908a\u6211\u5011\u7528\u7b2c\u4e00\u500b\u514d\u8cbb\u7684\u5716\u793a\u9ede\u9032\u53bb\uff0c\u514d\u8cbb\u7248\u4e5f\u53ea\u6709\u4e00\u7a2e\u7c97\u7d30\uff0c\u78ba\u5b9a\u4f7f\u7528\u9019\u500b\u7684\u8a71\u5c31\u6309\u4e0b\u300cStart Using This Icon\u300d\u6309\u9215\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_use.png?resize=1024%2C472&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" class=\"wp-image-1110\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_use.png?resize=1024%2C472&amp;ssl=1 1024w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_use.png?resize=300%2C138&amp;ssl=1 300w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_use.png?resize=768%2C354&amp;ssl=1 768w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_use.png?resize=1536%2C708&amp;ssl=1 1536w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_use.png?w=1800&amp;ssl=1 1800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f<\/figcaption><\/figure>\n\n\n\n<p>\u5f48\u51fa\u8996\u7a97\u5f8c\uff0c\u9019\u500b&lt;i&gt;\u6a19\u7c64\u5c31\u662f\u6211\u5011\u8981\u7684\u4e86\uff01<\/p>\n\n\n\n<p>\u56e0\u6b64\u6309\u4e0b\u8907\u88fd\u6309\u9215\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"342\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_copy.png?resize=820%2C342&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" class=\"wp-image-1111\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_copy.png?w=820&amp;ssl=1 820w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_copy.png?resize=300%2C125&amp;ssl=1 300w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_copy.png?resize=768%2C320&amp;ssl=1 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" data-recalc-dims=\"1\" \/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f<\/figcaption><\/figure>\n\n\n\n<p>\u5c31\u53ef\u4ee5\u56de\u5230\u6211\u5011\u7684HTML\u7a0b\u5f0f\u78bc\uff0c<strong>\u5728\u60f3\u8981\u52a0\u5165\u5716\u793a\u7684\u5730\u65b9\u8cbc\u4e0a&lt;i&gt;\u6a19\u7c64\uff0c<\/strong>\u540c\u6642\u8981\u628a&lt;input&gt;\u6a19\u7c64\u7684value\u5c6c\u6027\u7559\u7a7a\uff0c\u624d\u4e0d\u6703\u9084\u6709\u6587\u5b57\u5728\u5662\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- HTML --&gt;<\/span>\n\n&lt;div&gt;\u9019\u662f\u539f\u672c\u6309\u9215\u6a23\u5f0f&lt;\/div&gt;\n&lt;div class=\"btnI1\"&gt;\n\n    <span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- \u8cbc\u4e0a\u5716\u793a\u7684\u7a0b\u5f0f\u78bc --&gt;<\/span>\n    &lt;i class=\"fas fa-search\"&gt;&lt;\/i&gt;\n\n    <span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- \u5c07value\u7684\u300c\u641c\u5c0b\u300d\u5169\u500b\u6587\u5b57\u62ff\u6389 --&gt;<\/span>\n    &lt;input type=\"button\" value=\"\" class=\"ctrlbutton\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>\u9019\u6642\u5019\u6703\u66ab\u6642\u5448\u73fe\u9019\u6a23\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"182\" height=\"96\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_c1.png?resize=182%2C96&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" class=\"wp-image-1113\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f\" data-recalc-dims=\"1\"\/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a\u6b65\u9a5f<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u770b\u8d77\u4f86\u96d6\u7136\u66ab\u6642\u662f\u58de\u7684\uff0c\u4f46\u9019\u500b\u6b65\u9a5f\u7684\u91cd\u9ede\u662f\uff0c<strong>\u90a3\u500b\u653e\u5927\u93e1\u6709\u6210\u529f\u986f\u793a\u51fa\u4f86\u5c31\u5b8c\u6210icon\u7684\u5d4c\u5165\u56c9\uff01<\/strong><\/p>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E4%BF%AE%E6%AD%A3Font_Awesome%E5%9C%96%E7%A4%BA%E8%88%87%E6%8C%89%E9%88%95\"><\/span>\u4fee\u6b63Font Awesome\u5716\u793a\u8207\u6309\u9215<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u63a5\u4e0b\u4f86\uff0c\u56e0\u70ba\u653e\u5927\u93e1\u76ee\u524d\u662f\u8207\u6309\u9215\u4e26\u6392\u5448\u73fe\uff0c\u6211\u5011\u8981\u5c07\u653e\u5927\u93e1\u653e\u5165\u6309\u9215\u4e2d\uff0c\u4e26\u628a\u6309\u9215\u5bec\u5ea6\u653e\u5927\u5230\u9069\u7576\u7684\u5927\u5c0f\u3002<\/p>\n\n\n\n<p>\u9019\u6642\u5019\u8981\u7528\u4e0aposition:relative\u548cposition:absolute\u76f8\u5c0d\u4f4d\u7f6e\u7684\u5c6c\u6027\u4f86\u5448\u73fe\u3002<\/p>\n\n\n\n<p>\u9084\u4e0d\u77e5\u9053\u9019\u5169\u500b\u5c6c\u6027\u600e\u9ebc\u4f7f\u7528\u7684\u8a71\uff0c\u53ef\u4ee5\u9ede\u9078\u4e0b\u65b9<a href=/index.html"https:\/\/\/css-position-relative-absolute\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u9023\u7d50<\/a>\u770b\u6211\u5011\u53e6\u4e00\u7bc7\u7684\u6559\u5b78\uff0c\u5148\u8a8d\u8b58\u4e00\u4e0b\u9019\u5169\u500b\u5c6c\u6027\u5466\uff01<\/p>\n\n\n\n<p>(\u5ef6\u4f38\u95b1\u8b80\uff1a<a href=/index.html"https:\/\/\/css-position-relative-absolute\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS position \u5c6c\u6027\u6559\u5b78\uff1arelative\u548cabsolute\u5be6\u4f5c<\/a>)<\/p>\n\n\n\n<p>\u65bc\u662f\u6700\u7d42\u7684\u6240\u6709CSS\u5982\u4e0b\uff0c\u7d05\u8272\u5b57\u9ad4\u70ba\u6709\u4fee\u6539\u7684\u5167\u5bb9\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">\/*CSS*\/\n\/* \u7d05\u8272\u5b57\u9ad4\u70ba\u672c\u6b21\u4fee\u6539\u5167\u5bb9 *\/<\/span>\n\n.ctrlbutton {\n    display: inline-block;\n    margin: 5px 3px;\n    font-weight: 400;\n    text-align: left;\n    white-space: nowrap;\n    vertical-align: middle;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    padding: 2px 13px;\n    font-size: 14px;\n    line-height: 30px;\n    min-height: 35px;\n    border-radius: 2px;\n    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n    color: #ffffff;\n    background-color: rgb(148, 190, 214);\n    border-radius: 8px;\n    cursor: pointer;\n    letter-spacing: 2px;\n    box-shadow: 2px 2px 3px grey;\n    border: none;\n    padding-right: 11px;\n\n    <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u65b0\u589e\u6309\u9215\u5bec\u5ea6 *\/<\/span>\n    <span class=\"has-inline-color has-vivid-red-color\">width: 60px;<\/span>\n}\n\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* \u7576\u5716\u793a\u88ab\u6e38\u6a19\u8986\u84cb\u6642\uff0c\u5b83\u540c\u5c64\u7684\u4e0b\u4e00\u500b\u6a19\u7c64\u72c0\u614b\u6539\u8b8a *\/<\/span>\n<span class=\"has-inline-color has-vivid-red-color\">i:hover + .ctrlbutton,<\/span> .ctrlbutton:hover {\n    color: white;\n    box-shadow: none;\n    border: none;\n    background-color: rgb(124, 170, 195);\n}\n\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* \u8a2d\u5916\u5c64\u70ba\u57fa\u6e96\u4f4d\u7f6e *\/<\/span>\n<span class=\"has-inline-color has-vivid-red-color\">.btnI1{\n  position: relative;\n}\n\n<\/span>\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* \u653e\u5927\u93e1\u8a2d\u70ba\u76f8\u5c0d\u4f4d\u7f6e *\/<\/span><span class=\"has-inline-color has-vivid-red-color\">\ni.fa-search{\n  position: absolute;\n  top: 16px;\n  left: 26px;\n  color: white;\n}<\/span>\n<span class=\"has-inline-color has-vivid-red-color\">\n<\/span>\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* \u6e38\u6a19\u79fb\u52d5\u5230\u5716\u793a\u6642\uff0c\u6e38\u6a19\u6539\u8b8a *\/<\/span><span class=\"has-inline-color has-vivid-red-color\">\ni.fa-search:hover{\n  cursor: pointer;\n}<\/span><\/code><\/pre>\n\n\n\n<p>\u5b8c\u6210\u6a23\u5f0f\u5982\u4e0b\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"168\" height=\"103\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/fontawesome_c2.png?resize=168%2C103&#038;ssl=1\" alt=\"Font Awesome\u63d2\u5165\u5716\u793a\u5b8c\u6210\u6a23\u5f0f\" class=\"wp-image-1117\" title=\"Font Awesome\u63d2\u5165\u5716\u793a\u5b8c\u6210\u6a23\u5f0f\" data-recalc-dims=\"1\"\/><figcaption>Font Awesome\u63d2\u5165\u5716\u793a<br>\u5b8c\u6210\u6a23\u5f0f<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E7%B8%BD%E7%B5%90\"><\/span>\u7e3d\u7d50<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u4ee5\u4e0a\u5c31\u662f\u6574\u500bFont Awesome\u7684\u61c9\u7528\u65b9\u5f0f\uff0c\u4ee5\u53ca\u5982\u4f55\u5c07\u5716\u793a\u653e\u5728\u6309\u9215\u4e0a\u7684\u6559\u5b78\u3002<\/p>\n\n\n\n<p><strong>Font Awesome\u76f8\u7576\u597d\u7528<\/strong>\uff0c\u552f\u4e00\u7684\u9650\u5236\u5927\u6982\u5c31\u662f\u5982\u679c\u8981\u7528\u5230\u5927\u91cf\u7684\u5716\u793a\uff0c\u4e26\u4e14\u901a\u901a\u653e\u5728\u540c\u4e00\u500b\u7cfb\u7d71\uff0c\u6709\u6642\u5019\u767c\u73fe\u4ed8\u8cbb\u7684\u5716\u793a\u6bd4\u8f03\u597d\u770b\u7684\u6642\u5019\uff0c\u5c31\u8981\u8003\u616e\u4ed8\u8cbb\u9084\u662f\u81ea\u5df1\u756b\u4e86\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u662f\u516c\u53f8\u9047\u4e0a\u6709\u4e00\u4e9b\u4ed8\u8cbb\u5716\u793a\u60f3\u4f7f\u7528\uff0c\u4f46\u516c\u53f8\u6c92\u6709\u7f8e\u5de5\u80fd\u4f5c\u5716\u6216\u6c92\u6709\u591a\u9918\u6642\u9593\u7684\u6642\u5019\uff0c\u5efa\u8b70\u53ef\u4ee5\u76f4\u63a5\u8b8a\u6210\u4ed8\u8cbb\u6703\u54e1\uff0c<strong>\u4e0d\u50c5\u672a\u4f86\u958b\u767c\u7cfb\u7d71\u7684\u904b\u7528\u4e0a\u8b8a\u5f97\u76f8\u7576\u4fbf\u5229\u3001\u63d0\u9ad8\u4e00\u81f4\u6027\uff0c\u540c\u6642\u4e5f\u662f\u4ee5\u884c\u52d5\u652f\u6301\u9019\u4e9b\u8cc7\u8a0a\u61c9\u7528\u5e73\u53f0\u7684\u597d\u65b9\u6cd5\u5466\uff01<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><a href=/index.html"https:\/\/\/tab-css-change\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u7d14CSS\u88fd\u4f5cHTML\u9801\u7c64\u5207\u63db\u6548\u679c<\/a><\/li><li><a href=/index.html"https:\/\/\/rwd-two-line\/\" target=\"_blank\" rel=\"noreferrer noopener\">RWD\u6559\u5b78-\u53ea\u8981\u5169\u884c\u5c31\u80fd\u8f15\u9b06\u898b\u6548\u7684\u5be6\u4f5c\u7d93\u9a57<\/a><\/li><li><a href=/index.html"https:\/\/\/radio-button-css-change-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u7d14CSS\u5c07Radio button\u7f8e\u5316\u8207\u958b\u95dc\u578b\u6574\u7406(\u4e0a)<\/a><\/li><li><a href=/index.html"https:\/\/\/radio-button-css-change-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u7d14CSS\u5c07Radio button\u7f8e\u5316\u8207\u958b\u95dc\u578b\u6574\u7406(\u4e0b)<\/a><\/li><li><a href=/index.html"https:\/\/\/radio-button-and-checkbox-customize\/\" target=\"_blank\" rel=\"noreferrer noopener\">Radio button\u548cCheckbox\u653e\u5927\u4e26\u81ea\u8a02\u6a23\u5f0f<\/a><\/li><\/ul>\n\n\n\n<script async=\"\" src=/index.html"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- square ads -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-5595715547350173\" data-ad-slot=\"7241372607\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u6559\u4f60\u5982\u4f55\u5c07\u6587\u5b57\u985e\u578b\u7684\u6309\u9215\uff0c\u900f\u904e Font Awesome \u4f86\u6539\u6210\u5716\u793a\u985e\u578b\u7684\u6309\u9215\u5427\uff01\u53ef\u4ee5\u900f\u904eGoogle\u700f\u89bd\u5668\u76f4\u63a5\u641c\u5c0b\u8f38\u5165font awesome cdn\uff0c\u7528\u7a0b\u5f0f\u78bc\u7684\u65b9\u5f0f\u5d4c\u5165\u5716\u793a\uff0c\u5c31\u80fd\u76f4\u63a5\u4f7f\u7528 Font Awesome \u7684\u5716\u793a\u56c9\uff01<\/p>\n","protected":false},"author":1,"featured_media":1126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,7],"tags":[118,119,18,30,117],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/02\/apps-426559_1920.jpg?fit=1920%2C1357&ssl=1","_links":{"self":[{"href":"https:\/\/\/wp-json\/wp\/v2\/posts\/1052"}],"collection":[{"href":"https:\/\/\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/comments?post=1052"}],"version-history":[{"count":9,"href":"https:\/\/\/wp-json\/wp\/v2\/posts\/1052\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/\/wp-json\/wp\/v2\/posts\/1052\/revisions\/2329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/media\/1126"}],"wp:attachment":[{"href":"https:\/\/\/wp-json\/wp\/v2\/media?parent=1052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/categories?post=1052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/tags?post=1052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}