I have some awesome icons that I would like to direct to a link when clicked. I tried wrapping them in anchor tags, but that doesn't work for some reason, what can I do? I tried two implementations.
First one
<a href ="Login.php">
<li class="nav-item border rounded-circle mx-2 cart-icon">
<i class="fas fa-shopping-cart p-2"></i>
</li>
</a>
Second one
<li class="nav-item border rounded-circle mx-2 cart-icon">
<i class="fas fa-shopping-cart p-2"></i>
</li>
Remove the list, it's not needed
<html>
<head>
<script src="https://kit.fontawesome.com/2442adcce2.js" crossorigin="anonymous"></script>
</head>
<body>
<a href ="https://www.w3schools.com">
<i class="fas fa-shopping-cart p-2"></i>
</a>
</body>
</html>
This works perfectly, feel free to reply if it doesn't work. I've tested it to make sure.
Related
here's how it looks like when expanded
I want to hide the text and only show the icons when sidebar menu is toggled and sidebar container is compressed
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="sidebar">
<a th:href="#{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span>Dashboard</a>
<a th:href="#{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span>Admin Profile</a>
<a th:href="#{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span>Notifications</a>
<a th:href="#{/account/}" class="sidebar-menu"><span class="fas fa-users"></span>User Accounts</a>
<a th:href="#{/product/}" class="sidebar-menu"><span class="fas fa-list"></span>Product List</a>
<a th:href="#{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span>Transactions</a>
<a th:href="#{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span>Sales report</a>
</div>
Please help
<div class="sidebar compressed">
<a th:href="#{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span><span class="menu-text">Dashboard</span></a>
<a th:href="#{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span><span class="menu-text">Admin Profile</span></a>
<a th:href="#{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span><span class="menu-text">Notifications</span></a>
<a th:href="#{/account/}" class="sidebar-menu"><span class="fas fa-users"></span><span class="menu-text">User Accounts</span></a>
<a th:href="#{/product/}" class="sidebar-menu"><span class="fas fa-list"></span><span class="menu-text">Product List</span></a>
<a th:href="#{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span><span class="menu-text">Transactions</span></a>
<a th:href="#{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span><span class="menu-text">Sales report</span></a>
wrap the text in span and add compressed class when sidebar is compressed and remove the class when sidebar is expanded. Then add below css:
.sidebar.compressed .menu-text{display:none}
You cannot use a css selector to target text nodes. (There is an experimental feature called ::target-text, but this will not help you in this case anyway).
You should wrap the text in an element (most likely a span) and then use a selector for that to show/hide the text.
Below a possible solution for your issue.
I've wrappen a span around the text of the navbar items to easily address them using CSS.
The word 'compress' is used to allow the text to disappear. You need to hover it with the mouse.
Required CSS is added to let the text disappear.
.sidebar {
display: flex;
flex-direction: column;
}
.fas {
width: 40px;
text-align: center;
}
#compress:hover~a>.nav-text {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar">
<div id="compress">Compress</div>
<a th:href="#{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span><span class="nav-text">Dashboard</span></a>
<a th:href="#{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span><span class="nav-text">Admin Profile</span></a>
<a th:href="#{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span><span class="nav-text">Notifications</span></a>
<a th:href="#{/account/}" class="sidebar-menu"><span class="fas fa-users"></span><span class="nav-text">User Accounts</span></a>
<a th:href="#{/product/}" class="sidebar-menu"><span class="fas fa-list"></span><span class="nav-text">Product List</span></a>
<a th:href="#{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span><span class="nav-text">Transactions</span></a>
<a th:href="#{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span><span class="nav-text">Sales report</span></a>
</div>
I have a asp.net application, where I wanted to use a premade bootstrap template for my frontend. I found this one.
The original site from the template looks really nice with a background like this:
I copied all the css into my css folder, and also took the html and cut some parts of it out such that I could just render my own content in it.
My _layout.cshtml that should be a scaffolding for other html files looks now like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2021</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
As far as I understand, the central line for displaying the background image is this one:
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
Where we set the image as our background.
The problem is though, that the site I get, looks like this:
Instead of having the nice image as a background, I just get grey. I would like for the image to be displayed.
How do I get the image shown in the background, just like in the source i have linked?
EDIT:
I now looked in the dev tool, where I found it:
But clicking the image gets me This localhost page can’t be found.
So it might look like the given path is bad. This is a little bit strange to me, since my IDE actually suggested the entire current path to me.
What should I do with my path such that the image can be found?
Is your mentioned path (../../wwwroot/assets/home-bg.jpg) correct? because image won't be rendered if path is incorrect, and the background color becomes grey because of the classname mentioned.
i after trying the path ../../wwwroot/assets/home-bg.jpg I then tried to assume that my application by default would be looking in the wwwroot directory. So I tried the path assets/home-bg.jpg.
My IDE (rider) shows red lines, and complains about it. But it works
<div class="item slides">
<div class="slide-12"></div>
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"></a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"></a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"></a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"></a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"></a>
</div>
</div>
The hyperlinks in the above code snippet are not clickable. It could be a problem of another overlapping div. The links work when I use tab.
I tried z-index in different combinations, but none of them seem to work!
Find the complete html and css file in the following links:
CSS
HTML
Any help appreciated.
I added some text inside the anchor tags. But it seems you are needing to show them just as Font Awesome icons. In that case a single space character will be enough. Or well a
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"> sowmiya-nagarajan</a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"> strangest-quark</a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"> strangely-quark</a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"> </a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"> </a>
</div>
The links have no content inside them. What you can do if you want icon only links is to put the fa-* classes on a span or i tag inside the a tag like so:
<a href="https://example.com" >
<span class="fa fa-linkedin"></span>
</a>
This then causes the a tag to actually have content and be clickable.
What's the best way to get a space between the link/paragraph and the icon?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
Doesn't work to just put a space before the text because it will be changed back when you minify/uglify the project.
I tried with all kinds of padding and margins. Can't get them to separate.
I would use the .fa-fw class. For example: <i class="fa fa-cog fa-fw"> This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.
Instructions: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
Don't know if is the best but you can add some margin-right to the i element:
i {
margin-right: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
Old question but I didn't liked any of these answers so I did it this way:
<i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>
I kinda hate CSS or dirty html and I prefer working only with classes but fa-fw isn't useful with some icons. Not sure if span is the way to go but it looks good in my project.
So you can just wrap your text around something and give it a margin in which direction you want.
I guess i is display: inline so you'll have to set its display to inline-block for margin-right to work :
i {
display: inline-block;
margin-right: 1em;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
There are 2 spaces you need to add to make the UI look good. First, before the icon and a little space in between the icon and the text field.
So for the first case you need to add a font awesome class
fa-fw
class. for the second case, we just need a Non-Breaking Space.
 
This way you will not need an extra class to be added.
Below is a sample code to explain this.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
Since I just came across the same question I took a closer look at Christina's suggestion from the font-awesome example page (sorry, I'm not allowed to just comment yet).
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
The most distance here is gained by (see screen 1) rather than from fa-fw see screen 2 since this is just unifying the width of the font-icon itself, so for a nicer look you may want to go for both.
(which will be interpreted as a space then) also should not make any troubles while minifying based on some quick tests.
Just use this:
a > i{
padding-right:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply "></i>Change
<i class="fa fa-cloud mr-2"></i>
This integrates Bootstrap as well as does not require for any extra tags!
None of the answers here worked for me. I had to do this:
<i class="fa fa-reply"><span>Change</span></i>
i span {
display: inline-block;
margin-left: 0.3rem;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply" style="padding-right:5px"></i>Change
you can do inner css after -class="fa fa-reply"- put -style="padding-right:5px"-
note: if you doing more then one icon type the padding size will be different by 1 or -1 px
or just put a space before the word like this
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i> Change
I am trying to add a font awesome icon in front of my Delete & Settings link button but its not working. Can someone please tell me what is missing?
Html Code:
<div class="jumbotron">
<p>
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete
</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings
</a>
</p>
</div>
Added these css:
1) bootstrap.min.css
2) font-awesome.min.css
Also, please see the fiddle here.
This is a bug in 3.2.1 for site URLs, fixed in 4.0.3. Replace the link external link with http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
(In HTML, it would be <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">)
Check this Fiddle
Try with this..
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="jumbotron">
<p>
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete
</a>
<br>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings
</a>
</p>
</div>
Just use the following link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
In my case I haven't added the fonts to the project. I found an error in developer console and added below fonts to the location where Font Awesome(font-awesome.min.css) is looking for.
I had same problem as yours and I followed the solution from Wobuffet but it was not working.
I added title ="" to the element and it fixed my issue:
<i class="fa fa-pencil" title="Edit"></i>
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous"
This link is really worked for me .