Why am I unable to display the icon within the <anchor> element without using the href attribute? The icon only appears when I set the href attribute to "". Even if I manage to show the icon by adding href="", adjusting the size with width and height attributes is not working. My goal is to add the href attribute dynamically using jQuery to include parameters in the URL.
Here's the code snippet:
$(document).ready(function() {
var content="";
var quoteContent="";
var quoteAuthor="";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content=key[0].content + "<p>— " + key[0].title + "</p>";
quoteContent=key[0].content;
quoteAuthor=key[0].title;
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
$("#tweet-prop").attr('href','https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text='+encodeURIComponent('"'+quoteContent+'"'+'-'+quoteAuthor));
});
});.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:5%;
}
div.background{
background-color: rgba(245,245,245,0.1);
border-radius:10%;
padding-bottom: 2%;
}
.button-prop{
/*transformation : translateX(-50%); */
display: inline-block;
position: relative;
padding-left : 50%;
/*-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%); */
}
.quote-shape{
border-radius: 10%;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background{
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
text-align: center;
}
#share {
height:30px;
width: 80px;
}
.space-from-quote{
padding-top: 2%;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<!--<div class="row" id="button-shape">
<div id="share" class="col">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a>
</div>-->
</div>
<div class="buttons">
<a class="button" id="tweet-prop" name="tweet my quote"><i class="fa fa-twitter"></i></a>
<button type="button" id="click" class="btn btn-outline-secondary btn-circle button-prop" ><i class="fa fa-refresh fa-2x"></i>
</button>
</body>
</html>