How to get Icons on button - html

So I have
<a type="button" class="btn mt-2 btn-dark" href="https://www.youtube.com/channel/UCzbk3N8EvWBRUKA7Kcdp5zg" target="_blank"><i class="fab fa-youtube"></i> YouTube</a>
^ Button Works Great. Output: https://cdn.apilol.pics/‍​⁠‍‍‍​‌​​​‍​‍⁠​⁠⁠‍​⁠‌‍‍​‌‍‌⁠⁠ඞඞඞඞඞ
And I have this button:
<a type="button" class="btn mt-2 btn-dark" href="http://ez.apilol.xyz" target="_blank"><i class="fab fa-"></i> E-Z.bio</a>
I can't figure out how to get the icon like the youtube one has. All I know is the thing showing the icon is:
<i class="fab fa-youtube"></i> YouTube</a>
Please help!

<a href=“yoursite.com“><img scr=“yousource.png“></a>
or
<img scr=“yousource.png“ onclick=“open()“>
<script>
function open(){
window.open(“yoursite.com“)
}
</script>

Related

How to disable hover on bootstrap 4 dropdown

I have a page with a data grid, and in that grid every row has a bootstrap dropdown button/menu in it with actions you can perform against that data row. The problem is, the menu opens on hover, and I want it to be on click only (so the user doesn't accidentally open the menu on the wrong row).
Is there a way via CSS to tell the menus to not do anything on hover? I'd prefer not to use jquery for it, and as I have other dropdowns on the page outside the grid, I'd also like to target the ones in the grid specifically so I don't bung up the others.
Sample cell in ng-repeat row:
<td class="text-center" ng-if="vm.isCustService">
<div class="dropdown drop-down-in-grid">
<button type="button" id="btnCustDetails_{{$index}}"
class="btn btn-success btn-sm dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-fw fa-ellipsis-v fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnCustDetails">
<div>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/details/" id="lnkDetails_{{$index}}"><i class="fa fa-fw fa-user"></i> Customer Details</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/addresses/" id="lnkAddresses_{{$index}}"><i class="fa fa-fw fa-address-book-o"></i> Addresses</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/jobs/" id="lnkJobs_{{$index}}"><i class="fa fa-fw fa-calendar-o"></i> Jobs</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/createJob/" id="lnkAddJob_{{$index}}"><i class="fa fa-fw fa-calendar-plus-o"></i> New Job</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/notes/" id="lnkNotes_{{$index}}"><i class="fa fa-fw fa-file-word-o"></i> Notes</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/statements/" id="lnkStatements_{{$index}}"><i class="fa fa-fw fa-money"></i> Statements</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/orderSummary/" id="lnkOrderSummary_{{$index}}"><i class="fa fa-fw fa-tasks"></i> Order Summary</a>
</div>
</div>
</div>
</td>
Delete this style from your css
.dropdown:hover>.dropdown-menu {
display: block;
}

FontAwesome icon fa-plus not visible

I tried to add FontAwesome icon "fa-plus", but it is not showing.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class="table-add float-right mb-3 mr-2"><i
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
You're making a mistake there. You need to remove the extra anchor closing tag for it to work. Good luck.
Your HTMLhave errors: (two "< /a>")
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
</a>
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
</a>
</span>
Replace with this:
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
To add font awesome + icon, use "fa fa-plus"
For Example :
class="fa fa-plus"

link working on localhost, not on live

I do not understand why my link "back to portfolio" is working on my localhost, and not on my live domain. The only links there is not working, is the back to portfolio button.
Can anybody see why?
My portfolio link
<span class="col-xs-12">
<a href="portfolio.php" class="btn btn-border">
<i class="fa fa-rocket"></i>
Back to Portfolio
/a>
<a href="contact.php" class="btn btn-border">
<i class="fa fa-comment-o"></i>
Work with me?
</a>
</span>
<span class="col-xs-12">
<a href="Portfolio.php" class="btn btn-border">
<i class="fa fa-rocket"></i>
Back to Portfolio
/a>
<a href="contact.php" class="btn btn-border">
<i class="fa fa-comment-o"></i>
Work with me?
</a>
</span>
its case sensitive change fine name o Portfolio or vise versa

Limit width on Bootstrap input-group

I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.
The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }
It will work :
button {
white-space: normal !important;
height: auto !important;
}

Want to make Font Awesome icons clickable

So I am new to web development and I am trying to link font awesome icons to my social profiles but am unsure of how to do that. I tried using an a href tag but it made all of the icons take me to one site instead of the one I wanted. Here is the code:
<i class="fa fa-dribbble fa-4x"></i>
<i class="fa fa-behance-square fa-4x"></i>
<i class="fa fa-linkedin-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
I'd like for each of these icons to go to their respective profiles. Any suggestions?
You can wrap those elements in anchor tag
like this
<i class="fa fa-dribbble fa-4x"></i>
<i class="fa fa-behance-square fa-4x"></i>
<i class="fa fa-linkedin-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
Note: Replace href="your link here" with your desired link e.g. href="https://www.stackoverflow.com".
If you don't want it to add it to a link, you can just enclose it within a span and that would work.
<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
in your css, then you can:
#clickableAwesomeFont {
cursor: pointer
}
Then in java script, you can just add a click handler.
In cases where it's actually not a link, I think this is much cleaner and using a link would be changing its semantics and abusing its meaning.
Using bootstrap with font awesome.
<a class="btn btn-large btn-primary logout" href="#">
<i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>
I found this worked best for my usecase:
<i class="btn btn-light fa fa-dribbble fa-4x" href="#"></i>
<i class="btn btn-light fa fa-behance-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-linkedin-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-twitter-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-facebook-square fa-4x" href="#"></i>
Please use Like below.
<a style="cursor: pointer" **(click)="yourFunctionComponent()"** >
<i class="fa fa-dribbble fa-4x"></i>
</a>
The above can be used so that the fa icon will be shown and also on
the click function you could write your logic.
In your css add a class:
.fa-clickable {
cursor:pointer;
outline:none;
}
Then add the class to the clickable fontawesome icons (also an id so you can differentiate the clicks):
<i class="fa fa-dribbble fa-4x fa-clickable" id="epd-dribble"></i>
<i class="fa fa-behance-square fa-4x fa-clickable" id="epd-behance"></i>
<i class="fa fa-linkedin-square fa-4x fa-clickable" id="epd-linkedin"></i>
<i class="fa fa-twitter-square fa-4x fa-clickable" id="epd-twitter"></i>
<i class="fa fa-facebook-square fa-4x fa-clickable" id="epd-facebook"></i>
Then add a handler in your jQuery
$(document).on("click", "i", function(){
switch (this.id) {
case "epd-dribble":
// do stuff
break;
// add additional cases
}
});
<i class="fab fa-facebook-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fas fa-basketball-ball"></i>
<i class="fab fa-google-plus-square"></i>
All you have to do is wrap your font-awesome icon link in your HTML
with an anchor tag.
Following this format:
<font-awesome icon code>
Simply add font awesome icons into the anchor tag and then change the anchor color in CSS.
Here is an example:
HTML CODE
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-linkedin fa-4x"
id="social-icons-linkedin"></i></a>
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-facebook fa-4x"
id="social-icons-facebook"></i></a>
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-twitter fa-4x"
id="social-icons-twitter"></i></a>
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fas fa-envelope fa-4x"
id="social-icons-mail"></i></a>
CSS
Let's change the default color to black.
.icons-default{color: black;}