At first, this question shouldn't be that hard, but I don't know how to solve it.
I'm experimenting with Font-Awesome and everything works fine, except that it won't display just one icon.
Inside the Hml-Editor (Atom):
<body>
<div class="list">
<i class="fa fa-fw fa-home"</i><span>test</span>
</div><!--list-->
</body>
Inside the Browser:
<body>
<div class="list">
<i class="fa fa-fw fa-home" <="" i=""><span>test</span></i><i class="fa fa-fw fa-home" <="" i="">
</i></div><!--list--><i class="fa fa-fw fa-home" <="" i="">
</i>
</body>
Why's there more code in the Browser?
the code is saved with the Atom-Editor and this appears also in a freshly opened Chrome-window (same with Firefox)
Is this even a Browser problem?
After all this seems awkward but thanks for your help.
Your HTML is invalid, the opening i element never gets closed.
Try this:
<body>
<div class="list">
<i class="fa fa-fw fa-home"></i><span>test</span>
</div><!--list-->
</body>
Consider installing htmlhint to get notified about invalid HTML.
Related
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-commenting"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
Hi, the above HTML gives the following arrangement of URL in Desktop View and Mobile View
I have used nav-justified class to justify the links in both desktop view and mobile view. While the desktop view is just fine (Three links appearing horizontally), In mobile view the 2nd link is slightly misaligned (links have to appear vertically). Is there a cleaner way to align the links in mobile view?
answer updated
you can now individually give margin-right to your second link #PgmDetails
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<style>
#PgmDetails { margin-right: 22px; } <!-- as per your need-->
</style>
</head>
<body>
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-comments"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-md-12">
some text
</div>
</div>
</div>
Try like that ?
I think glyphicon used extra padding or margin in your code.
just update
<i class="glyphicon glyphicon-list-alt ml-0 pl-0" aria-hidden="true"></i>
or you can inspect element so that you can see where is that extra padding
I think your using Bootstrap. We can use flex-column class Reference link
I have multiple thumbs-up icons of font-awesome library on the screen. I want to toggle the color of the icon which is clicked.
How it can be done in AngularJS?
.liked{
color:#0000ff;
}
.not-liked{
color:#888;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-click="" class="not-liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
Sorry, I have not written the AngularJS part (click method) because I am not aware with the Angular approach (though I have achieved it with jQuery).
You can simply use ng-click and ng-class directives.
.liked{
color:#0000ff;
}
.not-liked{
color:#888;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-class="{'not-liked':!liked,'liked':liked}" ng-click="liked=!liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
Edit: removed extra ng-click.
in website http://fontawesome.io/icons/ there is bar-chart and bar-chart-o (alias) icons
but when when click to see description its go to same page url so what is difference.
<i class="fa fa-bar-chart" aria-hidden="true"></i> //same html
thanks
There is no difference, it is simply an alias! See the following example using both CSS classes:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<i class="fa fa-bar-chart-o" aria-hidden="true"></i>
I am displaying font awesome icons in row. when I click an icon it takes an action. and also I was trying to seelct an icon then it should show the option,when I click the option it should take an action.
Here is my code.
<div class="iconsInfo">
<div>
<div ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
<i class="fa fa-reply"></i>
</div>
<div ng-if="isReplyAll()"ng-click="replyAll()" class="iconRow" title="Reply All">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="isForward()" ng-click="forwardMessage()" class="iconRow" title="Forward">
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeleted()" ng-click="deleteMessage()" class="iconRow" title="Delete Message">
<i class="fa fa-trash"></i>
</div>
<div ng-show="canMoveToFolder()" class="iconRow">
<i class="fa fa-folder-o"> </i>
</div>
Here when I click on reply icon it calls replyMessage .when I click on folder icon it should show the options like sentToFolder1,sentToFolder2,when I click senttoFolder1 it calls an action. how to achieve this using fontawesome icons.
Using a button over a div would be a solution:
<button ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
<i class="fa fa-reply"></i>
</button>
You may need to change your iconRow class a bit, depending on what it is. Based on the name, I imagine perhaps the wrapper would be a good place for the iconRow styling.
I'm trying desperately to get my magnifying glass font to render it larger. The code below works fine in firefox but not in Chrome or IE9.
What am I missing?
.icon-larger
{
font-size:50px;
}
<div class="search-icon"><i class="icon-search icon-larger"></i></div>
thanks!
Take a look at this page and see the examples that scale icons size.
You can scale up to 5 times it's size.
Example:
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
The Font Awesome icon is hooked to the :after pseudo element, so your CSS would need to be
.icon-larger:before
{
font-size: 50px;
}
I have created a reference page of all the CSS content values for Font Awesome, along with a CSS snippet which shows how to use the icons with any element: http://astronautweb.co/snippet/font-awesome/
Add display:block or display:inline-block
Old question but I had the same issue and it appeared I forgot to include the Font Awesome css e.g: <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
You will still see the icon, but it will not scale when this is missing.