i use fontawesome icons on my website. i would like to add a link to this icons.
for example : when someone clicks on the google icon the google page should open in a new window.
<div id="GooglePlus">
<i class="fa fa-google-plus"></i>
</div>
href="http://google.com" target="_blank"
how can i combine this two things ?
Try this:
<div id="GooglePlus">
<i class="fa fa-google-plus"></i>
</div>
Related
I am attempting to link some bootstrap html to an email address. I have managed to link it, and it works perfectly fine, but the text is black. I created a class
(class="mail-text")
with a color, and a hover color and after uploading the files to my server, works exactly how I want it to on my the Mac I'm working on with Safari.
Unfortunately on the same machine, the color is black when opened in Google Chrome, and when attempting to view the site on both my iPhone and iPad, it again shows in black.
I've tried all sorts, and googled frantically, but to no avail.
HTML
<div class="top-bar-area inline bg-theme">
<div class="container">
<div class="row">
<div class="col-md-8 address-info text-left">
<div class="info box">
<ul>
<li>
<i class="fas fa-map-marker-alt"></i> Doncaster Road, Selby
</li>
<li>
<i class="fas fa-envelope-open"></i> <a class="mail-text" href="mailto:admin#swanbrayton.co.uk">admin#swanbrayton.co.uk</a>
</li>
<li>
<i class="fas fa-phone"></i> 07792 171188
</li>
</ul>
</div>
</div>
<div class="col-md-4 social text-right">
<ul>
<li>
<i class="fab fa-facebook-f"></i>
</li>
<li>
<i class="fab fa-twitter"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.mail-text {
color: white !important;
}
.mail-text:hover {
color: red !important;
}
Trying the code, it works correctly, when the mouse is somewhere else the text is white, instead when I go there with the mouse it turns red. Your problem I think is caching. Try deleting the website data in order to reload the css.
You can read more about browser cache in this other question:
Browser Caching of CSS files
I'm practicing making a simple modal login form using HTML and Bootstrap 4. I'm planning to put icons into my email and password field to make it looks interesting. However it looks like most of the method to do this are by using css to add the icons into input fields. I was wondering, can you add icons into input fields without using css?
You can add source into your head with icons and then use them with class.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
to make it looks like it's inside the input field, you need use some css. It can be inside your lines:
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<body>
<div id="yourDiv" style="border:1px solid black; width:200px">
<i class="fas fa-heart"></i>
<input style=border:0px>
</div>
</body>
I have these three bootstrap toggle buttons that alter the screen sizes according to requirement.
Now i been trying to make one of these buttons "active" defaultly as the page loads.
The code goes as :
<div class="vd_panel-menu hidden-sm hidden-xs" data-intro="<strong>Expand Control</strong><br/>" data-step=5 data-position="left">
<div data-action="remove-navbar" data-original-title="" data-toggle="tooltip" data-placement="bottom" class="remove-navbar-button menu"> <i class="fa fa-arrows-h" ></i> </div>
<div data-action="remove-header" data-original-title="" data-toggle="tooltip" data-placement="bottom" class="remove-header-button menu"> <i class="fa fa-arrows-v"></i> </div>
<div data-action="fullscreen" data-original-title="" data-toggle="tooltip" data-placement="bottom" class="fullscreen-button menu"> <i class="glyphicon glyphicon-fullscreen"></i> </div>
</div>
Any help is appreciated..
Considering the first button and assume it is been active which means your Button Class should look like this class="remove-navbar-button menu active">
.active is the default css of bootstrap whenever you need to active the button by default.you have to call that class by simply put active
Bootstrap toggle
I've created a website via bootstrap.
I can go for a facebook page locally by button but when I install code on my server, and when I go to my website and click on this button - it doesn't redirect me to a facebook page.
Below is a snippet of my index.html code:
<a name="contact"></a>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>We are on Facebook:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
</ul>
</div>
</div>
</div>
Could somebody help me to resolve this problem?
EDIT:
When I open this button in a new card it works. But when I click by left-button on mouse it doesnt work.
Use target="_top" for the link
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
So I have created some image hover effects for all to use. I am using bootstrap modals so you can click show code and the pop up will appear with the html and css you can simply copy and paste. However on some of the effects do not contain text and show font icons instead. For these examples I put the font icons inside the button and changed the style of the button. This works fine in chrome, you can click around the icons and the modal opens up. However in firefox it does not work at all is anyone able to help?
For example here is the code for effect 7. Works fine in chrome but not in firefox:
<button class="emptybutton" data-toggle="modal" data-target="#modal7">
<h2>Hover effect 7</h2>
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-dribbble"></i>
</p>
</button>
To view the live version go here: https://miketricking.github.io/
Thank you all in advance! :)
Ok so if anyone encounters the same issue you can actually use other elements to open a modal. All you have to do it give the data-toggle="modal" data-target="#modal7" attributes to a different element and it should work.
Here is my updated code:
<div class="overlay point" data-toggle="modal" data-target="#modal7">
<h2>Hover effect 7</h2>
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-dribbble"></i>
</p>
</div>