Replace Back to the top button with svg icon

Topic: Replace Back to the top button with svg icon

demzl25 priority asked 6 years ago

Hi, how can i replace Back to the top button with custom svg icon?

Add comment

Marta Wierzbicka staff answered 6 years ago

<p>Hi,</p>
<p>replace an icon tag with img tag like this:</p>
<pre><div class="fixed-action-btn smooth-scroll" style="bottom: 45px; right: 24px;">
  <a href="#top-section" class="btn-floating btn-large red">
    <img src="https://mdbootstrap.com/img/svg/arrow_left.svg">
  </a>
</div></pre>
<p>or totally without button like here:</p>
<pre><div class="fixed-action-btn smooth-scroll" style="bottom: 45px; right: 24px;">
  <a href="#top-section" class="">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASxSURBVGhD7ZlpqFVVFMdfFmnRJDZSoVSI2TxQhpVWNOgHBdMii6CIiGgeSfoQJWoR4hBZ1IcoKvxgZmqFFVQ0BwXNI81R0Yg2qtXvd7jrcd677953z93nvns/3D/84O59z9ln73P2WnvttXu66qqrrlqtreFkuAzmw81wMRwBW0DHaw+4A36F/2rwBVwJDnYg7Q2L4FnY2Yr+mgGrYK+sVL7Oh/VgZ/+FV2EhXAXXw1J4F2JAH8GhoLaE4+Fe+BvimgOhj7aF78A/34IdoUzdBrbtAB6EfaCWDoEnwOt/hxXwU6Wc52Wo0rmQv+gV2AHK0KVgm3/AmVY0KKfXZog+fQlPVn77QiZBlRy1F8yF5yu/34TdIUUHwKYK06woqBNBJ3AQjIWvIAa1Br4HP0KvNDAvOBi2gxjMJ6AnaVaPge3cnpWa13T4DWyrP5dAr8KAtBU1Ah4C6/6Cy6GoWxwD3v8LjLQiQRshOp73eM+AjqBX/4DzLu/y7PgciEY0rsOgUTl477svK6XJ6XM1TIaYLR/DLtBH34B/7peV+upoeB/8X+O7H5z7g+kB8J6zslK6XBZeB9v8APziVYq5PDMrVWsbuAny64DGdgb430B6Grz22KyUpt0gloeXYBQMqIvAi9ZmpdpyZb4TNoDXi0b4CBhuHA7al3oB/P+orJQmX4Zt+SVqvbhMeiqN0qkTq2k97QTXwNsQAwr8Wp9DGKVfLVUxEO1jUF0HXmyYEN6rEWlX18KjELaWx9AkVaeCbTmda2oYvAgakguXNzwFzYYpzmcdhL7/HIipliJt1349nJVqyFAk3l6edyDV/5clp7F9GnRhddHzwtfAQC0Gcwx0gpaB/TFcqavwzy48LorjoCpEbqOc+vbvpKxUR64RXvh4VuosaWOGUNqv3rWuRoOhiO73SCs6SCeAL/mNrNSANKS4oYj7bbUWg/2al5Ua0HBwD+JNbnnLcJupcmmIPUihmbIvfAre6J663QY/FeyL+/fCckGLJIA2sxLOhroxTosUW1vXkcK6Eby5P/fAUMqdqXGbEbexXWHdAPkB/AkulKfBUGod+PwFWakJGarbeRuZbUUbFLbxMySFSbeADf0Ie1oxhDJYDU91hRUpMkxxj25jZlIMWYZK7vF9rjvBPomFZuXGPjZOfmL3FaU0XEexUzVwLfXlbQ/LwcbFjdMSOA/MaJSZOTcgNKbSUxXJSBbSKfAc+JAYlNRKVhSVCerYPtxqRStlOn81xCCcdmU4gikQ2RnXqpacjxjrmCzOp/ONkvVqtc4visjMS2yvfUbTgzBJPRHM+ZokngD6cM8s3B9/DfEFzEaanBsPqdoVInHudDWaSPoSkbyuh2G9R2PuWVKl19P7/QC2rTf0gClZHiPkE8Riks43ZD6qrNMrB3A65E+k3I2Wutg6VcwUxgM8kDFv685sK0jR/uDXzOe7PoRZ0DLpAk2yaQvxUNOh1nl6pAuu94XMxx4HF4LeJ8KMwCO9CyD15TQsDdHM4XuQ70igcTq3P6vg7/wRWR4HcxfoRNoqDdxV3LySKZlvof+iGHgMZm72bvDcsJGjh7bK9cPQ2vMJjbWsQ9Ouuuos9fT8D5NgeZffuuvQAAAAAElFTkSuQmCC">
  </a>
</div></pre>
<p>you can also add some CSS to align the margins, e.g.</p>
<pre>.fixed-action-btn a img {
  margin-top: .4rem;
  margin-left: .3rem;
}</pre>
<p>Best,</p>
<p>Marta</p>

Please insert min. 20 characters.

Hi,

replace an icon tag with img tag like this:

<div class="fixed-action-btn smooth-scroll" style="bottom: 45px; right: 24px;">
  <a href="#top-section" class="btn-floating btn-large red">
    <img src="https://mdbootstrap.com/img/svg/arrow_left.svg">
  </a>
</div>

or totally without button like here:

<div class="fixed-action-btn smooth-scroll" style="bottom: 45px; right: 24px;">
  <a href="#top-section" class="">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASxSURBVGhD7ZlpqFVVFMdfFmnRJDZSoVSI2TxQhpVWNOgHBdMii6CIiGgeSfoQJWoR4hBZ1IcoKvxgZmqFFVQ0BwXNI81R0Yg2qtXvd7jrcd677953z93nvns/3D/84O59z9ln73P2WnvttXu66qqrrlqtreFkuAzmw81wMRwBW0DHaw+4A36F/2rwBVwJDnYg7Q2L4FnY2Yr+mgGrYK+sVL7Oh/VgZ/+FV2EhXAXXw1J4F2JAH8GhoLaE4+Fe+BvimgOhj7aF78A/34IdoUzdBrbtAB6EfaCWDoEnwOt/hxXwU6Wc52Wo0rmQv+gV2AHK0KVgm3/AmVY0KKfXZog+fQlPVn77QiZBlRy1F8yF5yu/34TdIUUHwKYK06woqBNBJ3AQjIWvIAa1Br4HP0KvNDAvOBi2gxjMJ6AnaVaPge3cnpWa13T4DWyrP5dAr8KAtBU1Ah4C6/6Cy6GoWxwD3v8LjLQiQRshOp73eM+AjqBX/4DzLu/y7PgciEY0rsOgUTl477svK6XJ6XM1TIaYLR/DLtBH34B/7peV+upoeB/8X+O7H5z7g+kB8J6zslK6XBZeB9v8APziVYq5PDMrVWsbuAny64DGdgb430B6Grz22KyUpt0gloeXYBQMqIvAi9ZmpdpyZb4TNoDXi0b4CBhuHA7al3oB/P+orJQmX4Zt+SVqvbhMeiqN0qkTq2k97QTXwNsQAwr8Wp9DGKVfLVUxEO1jUF0HXmyYEN6rEWlX18KjELaWx9AkVaeCbTmda2oYvAgakguXNzwFzYYpzmcdhL7/HIipliJt1349nJVqyFAk3l6edyDV/5clp7F9GnRhddHzwtfAQC0Gcwx0gpaB/TFcqavwzy48LorjoCpEbqOc+vbvpKxUR64RXvh4VuosaWOGUNqv3rWuRoOhiO73SCs6SCeAL/mNrNSANKS4oYj7bbUWg/2al5Ua0HBwD+JNbnnLcJupcmmIPUihmbIvfAre6J663QY/FeyL+/fCckGLJIA2sxLOhroxTosUW1vXkcK6Eby5P/fAUMqdqXGbEbexXWHdAPkB/AkulKfBUGod+PwFWakJGarbeRuZbUUbFLbxMySFSbeADf0Ie1oxhDJYDU91hRUpMkxxj25jZlIMWYZK7vF9rjvBPomFZuXGPjZOfmL3FaU0XEexUzVwLfXlbQ/LwcbFjdMSOA/MaJSZOTcgNKbSUxXJSBbSKfAc+JAYlNRKVhSVCerYPtxqRStlOn81xCCcdmU4gikQ2RnXqpacjxjrmCzOp/ONkvVqtc4visjMS2yvfUbTgzBJPRHM+ZokngD6cM8s3B9/DfEFzEaanBsPqdoVInHudDWaSPoSkbyuh2G9R2PuWVKl19P7/QC2rTf0gClZHiPkE8Riks43ZD6qrNMrB3A65E+k3I2Wutg6VcwUxgM8kDFv685sK0jR/uDXzOe7PoRZ0DLpAk2yaQvxUNOh1nl6pAuu94XMxx4HF4LeJ8KMwCO9CyD15TQsDdHM4XuQ70igcTq3P6vg7/wRWR4HcxfoRNoqDdxV3LySKZlvof+iGHgMZm72bvDcsJGjh7bK9cPQ2vMJjbWsQ9Ouuuos9fT8D5NgeZffuuvQAAAAAElFTkSuQmCC">
  </a>
</div>

you can also add some CSS to align the margins, e.g.

.fixed-action-btn a img {
  margin-top: .4rem;
  margin-left: .3rem;
}

Best,

Marta

demzl25 priority commented 6 years ago

Thank you for your help this has helped me but now i have new issue when i press this button smooth scrolling is not working properly! its scrolls wery fast not slow?

demzl25 priority commented 6 years ago

I have found solution thanks again! Damjan

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

demzl25

197Support score
54Questions 2Answers 222Snippets