{"id":11289,"date":"2026-03-30T06:21:29","date_gmt":"2026-03-30T06:21:29","guid":{"rendered":"https:\/\/fucuoai.com\/?p=11289"},"modified":"2026-04-06T11:22:40","modified_gmt":"2026-04-06T03:22:40","slug":"floating-icons","status":"publish","type":"post","link":"https:\/\/fucuoai.com\/en\/floating-icons\/","title":{"rendered":"How to create a floating icon on the right side of a website"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"11289\" class=\"elementor elementor-11289\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-0bf2e6e e-flex e-con-boxed e-con e-parent\" data-id=\"0bf2e6e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a09fd6 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"4a09fd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>How to add a social media floating icon to the right side of your WordPress website? Adding a floating icon to the right side of your website allows visitors to quickly contact you or follow you on social media. Here are the specific steps:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-ca77174 e-flex e-con-boxed e-con e-parent\" data-id=\"ca77174\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5756cbb elementor-widget elementor-widget-heading\" data-id=\"5756cbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Using the elementor widget HTML<\/h3>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-87661a5 e-flex e-con-boxed e-con e-parent\" data-id=\"87661a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49fff21 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"49fff21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Drag the Elementor widget HTML into our footer editing page. The reason for choosing the footer editing page is that if we want to display this social media icon on the page, we need to put this code in the header or footer.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-88db3ca e-flex e-con-boxed e-con e-parent\" data-id=\"88db3ca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46ce22c elementor-widget elementor-widget-image\" data-id=\"46ce22c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"734\" src=\"https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c-1300x734.webp\" class=\"attachment-large size-large wp-image-11293\" alt=\"WordPress\u6559\u7a0b\" srcset=\"https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c-1300x734.webp 1300w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c-400x226.webp 400w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c-768x434.webp 768w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c-1536x868.webp 1536w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c-18x10.webp 18w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/2fa42b11294392b2c58bd46e82d7726c.webp 1951w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-c54e25c e-flex e-con-boxed e-con e-parent\" data-id=\"c54e25c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c8a112 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"0c8a112\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Code example: Simply replace the links on your social media icons and QR codes as needed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-8a8ce32 e-flex e-con-boxed e-con e-parent\" data-id=\"8a8ce32\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e792f3 elementor-widget elementor-widget-code-highlight\" data-id=\"0e792f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"social-float\">\r\n\r\n  <!-- \u6296\u97f3 -->\r\n  <div class=\"social-item\">\r\n    <img decoding=\"async\" src=\"TikTok icon URL\" alt=\"\" title=\"\">\r\n    <div class=\"qr-box\">\r\n      <img decoding=\"async\" src=\"TikTok QR code URL\" alt=\"\" title=\"\">\r\n      <span>Douyin<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u5c0f\u7ea2\u4e66 -->\r\n  <div class=\"social-item\">\r\n    <img decoding=\"async\" src=\"Xiaohongshu icon URL\" alt=\"\" title=\"\">\r\n    <div class=\"qr-box\">\r\n      <img decoding=\"async\" src=\"Xiaohongshu QR code URL\" alt=\"\" title=\"\">\r\n      <span>RED<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-c20201a e-flex e-con-boxed e-con e-parent\" data-id=\"c20201a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3bcc23 elementor-widget elementor-widget-heading\" data-id=\"f3bcc23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Adjusting CSS Styles<\/h3>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-57f2ae0 e-flex e-con-boxed e-con e-parent\" data-id=\"57f2ae0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ef4ea1 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"0ef4ea1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>HTML is just for writing and uploading our content; we still need to use CSS to adjust our styles and positions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-3965262 e-flex e-con-boxed e-con e-parent\" data-id=\"3965262\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c35faf4 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"c35faf4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Code example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-6dd165a e-flex e-con-boxed e-con e-parent\" data-id=\"6dd165a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-446f7c9 elementor-widget elementor-widget-code-highlight\" data-id=\"446f7c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t\/* ===== Floating Position ===== *\/ .social-float { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 99999; } \/* ===== Icon ===== *\/ .social-item { position: relative; margin: 14px 0; } .social-item img { width: 40px; height: 40px; object-fit: contain; cursor: pointer; transition: 0.25s; opacity: 0.85; } .social-item:hover img { transform: scale(1.1); opacity: 1; } \/* ===== QR Code Box (Key Optimization\ud83d\udd25) ===== *\/ .qr-box { position: absolute; right: 65px; top: 50%; transform: translateY(-50%) translateX(10px); width: 200px; \/* Zoom in *\/ height: 200px; border-radius: 16px; \/* Change to a darker color (more like your initial one) *\/ background: #0f172a; \/* Reduce padding *\/ padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; transition: all 0.25s ease; } \/* Small triangle *\/ .qr-box::after { content: &quot;&quot;; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #0f172a; } \/* ===== QR code image (Key optimization \ud83d\udd25) ===== *\/ .qr-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; \/* Only keep the white border for QR code security *\/ padding: 4px; \/* Very small white border *\/ border-radius: 10px; } \/* ===== Text ===== *\/ .qr-box span { display: block; font-size: 12px; color: #fff; margin-top: 6px; } \/* ===== Hover display ===== *\/ .social-item:hover .qr-box { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } \/* ===== Hide on mobile ===== *\/ @media (max-width: 768px) { .social-float { display: none; } }\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-fe91794 e-flex e-con-boxed e-con e-parent\" data-id=\"fe91794\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51048cb color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"51048cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>After copying this CSS code, go to the Elementor editing page, click the HTML widget on the right, then click Settings on the left, scroll to the bottom and find CSS, then copy the code into it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-80af358 e-flex e-con-boxed e-con e-parent\" data-id=\"80af358\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d020ef elementor-widget elementor-widget-image\" data-id=\"7d020ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"715\" src=\"https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7-1300x715.webp\" class=\"attachment-large size-large wp-image-11294\" alt=\"WordPress\u6559\u7a0b\" srcset=\"https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7-1300x715.webp 1300w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7-400x220.webp 400w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7-768x423.webp 768w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7-1536x845.webp 1536w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7-18x10.webp 18w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/08a4cf2489db8d2c33e988bd548a2fe7.webp 2039w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-40c9a9e e-flex e-con-boxed e-con e-parent\" data-id=\"40c9a9e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11b85c8 elementor-widget elementor-widget-heading\" data-id=\"11b85c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Final effect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-9d8750e e-flex e-con-boxed e-con e-parent\" data-id=\"9d8750e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-39cc3c0 elementor-widget elementor-widget-image\" data-id=\"39cc3c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"986\" height=\"663\" src=\"https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/b920d8ba0da9e0f01425904e6f8d2062.webp\" class=\"attachment-large size-large wp-image-11295\" alt=\"WordPress\u6559\u7a0b\" srcset=\"https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/b920d8ba0da9e0f01425904e6f8d2062.webp 986w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/b920d8ba0da9e0f01425904e6f8d2062-400x269.webp 400w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/b920d8ba0da9e0f01425904e6f8d2062-768x516.webp 768w, https:\/\/fucuoai.com\/wp-content\/uploads\/2026\/03\/b920d8ba0da9e0f01425904e6f8d2062-18x12.webp 18w\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to add a social media feature to the right side of your WordPress website?<\/p>","protected":false},"author":1,"featured_media":11295,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_angie_page":false,"page_builder":"","footnotes":""},"categories":[171],"tags":[],"class_list":["post-11289","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resource-sharing"],"_links":{"self":[{"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/posts\/11289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/comments?post=11289"}],"version-history":[{"count":18,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/posts\/11289\/revisions"}],"predecessor-version":[{"id":11936,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/posts\/11289\/revisions\/11936"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/media\/11295"}],"wp:attachment":[{"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/media?parent=11289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/categories?post=11289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fucuoai.com\/en\/wp-json\/wp\/v2\/tags?post=11289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}