Currency Icon

by ducas

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>Hello, this is going to cost <span class="loan-price with-icon">1000</span> and hopefully not send you broke.</div>
<div class="loan-price">$1000</div>
<div class="loan-price with-icon">$1,000</div>
<div class="loan-price">asdjfklajs dfl</div>

CSS

a.mifund-loan-indicator {
  color: #005b89;
  text-decoration: none;
}

a.mifund-loan-indicator .icon {
  width: 20px;
  height: 18px;
  background: top right no-repeat no-repeat url('http://smilechoice.co/repayment/smilechoice/dollar.png');
  display: inline-block;
  vertical-align: middle;
}

JavaScript

$(document).ready(function () {
	$('.loan-price').each(function (i, e) {
  	var $this = $(e);
    var amount = Number(e.textContent.replace(/[^0-9\.]+/g,""));
    if (amount == 0) return;
    
    amount = amount.toLocaleString('en-AU', {
    	style: 'currency',
      currency: 'AUD'
    });
    
  	var $anchor = $this.wrap('<a href="javascript:void(0)" class="mifund-loan-indicator" title="' + amount + '"></a>');
    
    if ($this.hasClass('with-icon')) {
    	$anchor.append('<span class="icon"></span>');
    }
    
  })
})