I want to use icons in my project, I add icons like this:
<a href="#">
<i class="icon-display4"></i>
<span class="visible-xs-inline-block position-right"> start</span>
</a>
And add I link them in <head>:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
But the icons don't show.
How can I fix this?
Make sure your icon actually exists. It looks like you're trying to use:
<i class="icon-user-tie">
But a search on the official website doesn't show this one as being an active icon.
You can add font awesome icons with example:
<i class="fa fa-plus"></i>
Here a list with all the icons from font awesome:
http://fontawesome.io/icons/
I can't understand the question, but I think this might be what you are looking for:
to add images, then use the tag, the syntax goes like this:
<img src="image location like https://i.imgur.com/HLXsgMd.jpg">
for linked images then put the image inside the a tag, like this:
<img src="image location">
to make a favicon (the icon that appears next to the page title) this should work:
Please do note that it has to be a .ico file see here.
<link rel="shortcut icon" href="image location">
If you Want To Use Icons In Your Page Then You Have to Use awesome icons
Go-to: http://fontawesome.io/icons/
First You Need To Add Font Awesome Css File On Your Page. then After You Can Used It any where in page.
Add This : <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
For example, I'm using this icon:
<i class="fa fa-pencil" aria-hidden="true"></i>
If by 'icons' you mean Bootstrap Glyphicons, I recommend visiting https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp, they also come predefined with bootstrap standard plugins e.g. glyphicons-halflings-regular files.
Related
I can't add Font Awesome icon on the popup. Please, help me to figure out how it works. I don't know how to add the icon and change the color in CSS.
Here is HTML
<i class="fas fa-check-circle">
Here is CSS:
.fa-check-circle {color: #ffffff;}
What's wrong?
It doesn't work. I can't see the icon on the popup.
Here is my pin
Fontawesome library not added. Add it
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
fontawesome start page
the problem is that you'r not using font-awesome CDN,CDN is a content delivery network which refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos
In your case the classes (fas fa-check-circle) you've used are written inside the font-awesome servers .to access them you should link your webpage .To do that use the below link
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
Another way to use the fontawsome icons is to download their entire icon library which will contain their scripts and classes and linking them to your page directly
Replace this -
<i class="fas fa-check-circle">
With
<i class="fa fa-check-circle">
Change the css with this:
.fas {
color: red;
}
It isn’t clear from your code if you’ve included font awesome into your page. Add this line (between the tags) to your page.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I am uncertain if these are native to bootstrap only, but I'm using the default favicons on my HTML.
<i class="fa fa-video-camera"></i>
favicons cheatsheet
I want to know if there is a simple way of changing the color of this favicon, such as inserting another class like alert or by putting a #fff for example on the .css
I am trying to avoid a response such as making my own colored version and using it on a
<link rel="shortcut icon" href="/PATH_TO_STATIC_FAVICON/favicon.ico" type="image/x-icon"> <link rel="icon" href="/PATH_TO_ANIMATED_FAVICON/favicon.ico" type="image/x-icon">
Cheers
Hope this will help you,
With the help of Bootstrap Color Utility you can achieve this.
For example to achieve green color you can use the class text-success
<i class="text-success fa fa-video-camera"></i>
---USING HTML
<i class="text-success fa fa-video-camera"></i>
· "text-success"
Bootstrap color classes
---USING CSS
.fa-video-camera{color:green;}
· "color:green"
--- for specific hex
·"color:#fff"
for specific hex I supose you would need the css code used above but with the #hex as you would normally do
--info**
"class fa" seems bootstrap-only, since I tried it on a stripped down html and didn't work
You can't use font awesome icons as a favicons. Those are just for styling your html.
I am trying to use bulma icons following the docs here, but the icon doesn't show up:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div>
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>ICON</span>
</div>
Also see the fiddle here, what could be the problem?
You also need to include the bulma.min.css file, not just the .map.
Edit
Per the Bulma docs:
If you want to use icons with Bulma, don't forget to include Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Update 3/19/2019
As #Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
Bulma icons won't show up unless you call fontawesome libraries, we can use a kit code for that. This will look like <script src="https://kit.fontawesome.com/xxxxxxxx.js"></script> in the <head>...</head> section of your code.
note: you can get the code "xxxxxxxx" for free usage of fontawesome icons from the website.
https://fontawesome.com/start
I am looking to add font awesome flat social icons in my wordpress right sidebar.My theme has already font-awesome and font-awesome.min in CSS folder.I have no idea how to add it.
Add
<link rel="stylesheet" href="font-awesome_folder_name/css/font-awesome.min.css">
into head.
Or directly add absolute link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Absolute links would be better than relative ones
You place Font Awesome icons by using the prefix fa and the icon's name.
Example
<i class="fa fa-car"></i>
fontawesome.io here you can find more icon.
Just include the css link and use <i class="fa fa-youtube" aria-hidden="true"></i>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1><i class="fa fa-youtube" aria-hidden="true"></i></h1>
<h2><i class="fa fa-wordpress" aria-hidden="true"></i><h2>
<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/css/font-awesome.css">
This is how you can call font awesome in your wordpress site. But firstly you have to keep font-awesome.min.css file in your css file.
Then You also need to copy the fonts of font-awesome file and paste it into your fonts folder.
Then you can use this icon by writting this-
<i class="fa fa-address-book" aria-hidden="true"></i>
In this code it will show a address book icon.
Go to font-awesome website to know others icon code.
I'm having trouble with the Font Awesome toggle on and off icons not appearing. All of the icons that I have been using have been working, but now this one doesn't seem to. Is there a work around, or a fix I can apply? I'm simply doing:
<i class="fa fa-toggle-on"></i>
I updated my css reference to the latest font-awesome stylesheet and now is all working.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">