I'm trying to get Font-Awesome (6.2.1) to work but it's only showing up as squares. I dont know if i linked right, because the font awesome link always confuses me.
Does anyone have any suggestions?Its my cart icon
#product1 .pro .des .cart{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #e8f6ea;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
<div class="pro">
<img src="casa-wacom-2-removebg-preview.png" alt="">
<div class="des">
<span>Wacom</span>
<h5>Case para Wacom</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<a><i class="fa-light fa-cart-shopping cart"></i></a>
<h4>R$19,99</h4>
</div>
</div>
Have you included the Font-Awesome (6.2.1) CDN? In such a case, add it.
To your Squarespace website page, add Font Awesome icons
Go to Font Awesome and choose an icon you would like to add to your Squarespace website and copy the code.
For the rocket icon copy this code:
<i class="fas fa-rocket"></i>
You can copy this code to a code block on your Squarespace website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
Did you mean:
<i class="fa-solid fa-star"></i>
?
Related
I'd like to have a sticky header navigation menu that contains Text and an icon on a desktop browser, but only icons on a mobile device (as illustrated in my sketch at the bottom of this post - ignore colors used.) I've started writing the code here: https://codepen.io/jord8on/pen/pxgjZq
This article gives another exmaple of what I'd love to have. (specifically the 3rd of the "Tabbed Navigation" samples)
Here's what I need some help with:
When a browser width shrinks below 600px I'd like the labels/text next to the icons to disappear and only show the icons.
I want the .navbar to be sticky and remain atop the screen on desktop and mobile, when a users scrolls down.
I'd like to have the "active" menu item highlighted, depending on where a person is, in the site.
Home, Courses, Resources, and Events are all going to be different areas within a Wordpress site.
The Community tab will link to a subdomain which is running a Discourse community
Any help would be so much appreciated! 🙌
Current CSS/HTML:
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #B7234C;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px 0px;
color: white;
text-decoration: none;
font-size: 17px;
width: 20%;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #961d3f;
}
/* Current/active navbar link */
.active {
background-color: #d6295a;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
#media screen and (max-width: 600px) {
.navbar a {
float: none;
display: block;
}
}
<!-- Load font awesome icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Load font awesome icon library -->
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<i class="fa fa-fw fa-comments"></i> Community
<i class="fa fa-fw fa-edit"></i> Courses
<i class="fa fa-fw fa-star"></i> Resources
<i class="fa fa-fw fa-calendar"></i> Events
</div>
Put a span between your texts in your anchor tags and target it on the media query with a display none
Put a position fixed on your navbar you might need to reset the margins on the body. I added 4000px on height to reflect the sticky scroll.
Depending on the page change the class on the body tag and edit in the CSS when needed this example is targeting the events icon.
Codepen
Hope this helps.
body{
margin: 0;
height: 4000px;
}
/* Style the navigation bar */
.navbar {
position: fixed;
width: 100%;
background-color: #B7234C;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px 0px;
color: white;
text-decoration: none;
font-size: 17px;
width: 20%;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #961d3f;
}
/* Current/active navbar link */
/* In your html you change the body class and target it in here */
/* This example uses the events icon which is a child 5 in the navigation */
.events .navbar a:nth-child(5) {
background-color: #d6295a;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
#media screen and (max-width: 700px) {
.navbar{
display: flex;
}
.navbar span{
display: none;
}
}
<!-- Change the class name depending on the page that you're in then modify the css -->
<body class="events">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Load font awesome icon library -->
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i><span> Home</span></a>
<i class="fa fa-fw fa-comments"></i> <span>Community</span>
<i class="fa fa-fw fa-edit"></i><span> Courses</span>
<i class="fa fa-fw fa-star"></i> <span>Resources</span>
<i class="fa fa-fw fa-calendar"></i><span> Events</span>
</div>
</body>
I commented above, but here's an example:
#jord8on I added another attribute to the navbar in the code above. Keep in mind that you may need to add a top margin to any subsequent elements at an equal height to the navbar. Position fixed takes that element out of the flow of the DOM. As for the third part, is each page in a separate html file? Or how are you making the navbar globally available? You'll need to write some PHP to echo the "active" class into your links with Wordpress.
This got a bit lengthy for commenting, so here's the easier to read option. Sorry about that.
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #B7234C;
overflow: auto;
//Add this to the navbar element
position: fixed;
}
#media screen and (max-width: 600px) {
.navbar a {
float: none;
display: block;
}
.mob-off {
display: none;
}
}
<div class="navbar">
<a class="active" href="#">
<i class="fa fa-fw fa-home"></i> <span class="mob-off">Home</span>
</a>
<a href="#">
<i class="fa fa-fw fa-comments"></i> <span class="mob-off">Community</span>
</a>
<a href="#"><i class="fa fa-fw fa-edit">
</i> <span class="mob-off">Courses</span>
</a>
<a href="#">
<i class="fa fa-fw fa-star"></i> <span class="mob-off">Resources</span>
</a>
<a href="#">
<i class="fa fa-fw fa-calendar"></i> <span class="mob-off">Events</span>
</a>
</div>
I am retrieving an average rating on my batsmen and currently displaying it as the number itself out of 5. I want to replace the number of the average rating with font awesome stars, so if its 4.63/5 then show 4.63 font awesome stars out of 5 rather than the number i'm currently showing. What is the best way to go about this?
For example, only with percent:
<div class="star-rating" title="75%">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="front-stars" style="width: 75%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
Style for star rating
/*---------- star rating ----------*/
.star-rating {
display: flex;
align-items: center;
font-size: 3em;
justify-content: center;
margin-top: 50px;
}
.back-stars {
display: flex;
color: #bb5252;
position: relative;
text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
display: flex;
color: #FFBC0B;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0;
}
var frontStars = document.getElementsByClassName("front-stars")[0];
var percentage = 100 / 5 * 4.63;
frontStars.style.width = percentage + "%";
var rating = document.getElementsByClassName("star-rating")[0];
rating.title = +(4.63.toFixed(2)) + " out of " + 5;
*{margin, padding:0}
/*---------- star rating ----------*/
.star-rating {
display: flex;
align-items: center;
font-size: 3em;
justify-content: center;
margin-top: 50px;
}
.back-stars {
display: flex;
color: #bb5252;
position: relative;
text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
display: flex;
color: #FFBC0B;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0;
}
<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>
<div class="star-rating">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="front-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
I use this jquery library to add a star rating system when needed.
The Source: I include the jquery and style in a partial view that I only add to pages with the star system.
<script src="{{ asset('/vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/js/star-rating.js') }}" type="text/javascript"></script>
<link href="{{ asset('vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/css/star-rating.css')}}" media="all" rel="stylesheet" type="text/css" />
Form Item: Then I add it to my page using the
<div class="form-group">
<label for="text" class="col-sm-2 control-label">Rating:</label>
<input name='rate' id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" data-symbol="" data-glyphicon="false" data-rating-class="rating-fa">
</div>
To set a default value, or to show the existing value, you just need to add the value="" attribute to the input. The plugin does the rest.
Im trying to create star rating based on score or percentage. I have created codepen for inline stars. But don't understand how to do for stars shown in image. Stars should not be inline, they should formed a triangle.
Will you please help me with that.
and my codepen link
/*---------- general ----------*/
body {
background: #ff7070;
color: #F3FCF0;
font-family: sans-serif;
text-align: center;
}
/*---------- star rating ----------*/
%flex-display {
display: flex;
}
.star-rating {
#extend %flex-display;
align-items: center;
font-size: 3em;
justify-content: center;
margin-top: 50px;
}
.back-stars {
#extend %flex-display;
color: #bb5252;
position: relative;
text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
#extend %flex-display;
color: #FFBC0B;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0;
}
<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>
<div class="star-rating">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>>
<div class="front-stars" style="width: 70%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
Thanks in advance.
You are missing left:0 in .front-stars class
Sometime browsers render absolute element using left 0 some time not, So we should always mention combination of two at least( from left right top bottom)
Thanks
I've been stuck on this for hours and hours and became pretty desperate. So I have this angular2 applicaton made for a school project but what I want to do is when i click on the + button this dropdown menu comes down and when i click on it again, or when I click on a link, it closes again. Right now it just stays open all the time and doesn't do anything when I click it
I have tried many different things, from ng2-dropdown to a javascript file that shows or hides the menu. I am out of options and getting really frustrated on this.
this is the html element in the browser before i click the +
this is the html element in the browser after i click the +
I have done the proper imports for the ng2-dropdown module which should make it work. It might be something small and stupid, but I don't see it.
This is my app.component which has the navigation bar as a template. on click i route to other components html's.
#Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
And this is my css (actually sass but gets converted when run) for the dropdown class just in case. So when i click on the button the class is .dropdown and when you click it again it should change to .hidden
.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;
&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}
a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;
li {
text-align: left;
padding: 10px 15px;
margin: 0;
i {
margin-right: 10px;
}
}
&:hover {
color: #ffffff;
li {
background: linear-gradient(to top right, $primary_color1_white, $melon 30%); } } } }
.hidden{visibility: hidden;}
in your template modify this :
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
and then in your component logic:
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}
Here is my code:
.fa-caret-down{
margin-top: 3px;
padding-top:3px;
line-height: 3;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
As you see, none of padding or margin or line-height don't make my expected effect. Here is expected result:
How can I get that?
Note: Based on my real codes, I shouldn't use position: absolute; for that <i> element.
The margin/padding/line-height is working, you just have to add vertical-align:top to span
span{
vertical-align:top;
}
.fa-caret-down{
margin-top: 3px;
padding-top:3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
Here is the changes which works
.fa-caret-down{
top: 6px;
position : relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>