I am using the SmartAdmin v1.9.1 template with Angular 5. It came with FontAwesome v4.7.3 Pro, and it uses Bootstrap v3.3.6. I have upgraded FA to v5.10.0, using npm install --save-dev #fortawesome/fontawesome-free.
My question is not a duplicate of this SO question, but similar.
The upgrade has gone smoothly, just needed to change a few fa- icons.
I'm hung up on getting the Bootstrap checkbox icon to display. It displayed fine with v4.7.3, but now I get a small box, where the check mark icon should be - see below.
The CSS below shows the checkbox style. I have tried other content than '\f00c', but same problem. Adjusting the font: does result in changes in size, but the small box remains.
Relevant HTML:
<section>
<label class="checkbox">
<input type="checkbox" name="remember" checked (click)="doCheckbox()">
<i></i>Stay signed in</label>
</section>
Relevant CSS:
.smart-form .checkbox input + i:after {
content: '\f00c';
top: -1px;
left: 1px;
width: 15px;
height: 15px;
font: normal 16px/19px FontAwesome;
text-align: center;
}
.smart-form .checkbox input:checked:hover + i:after {
content: '\f00d';
}
.smart-form .checkbox input:checked:disabled:hover + i:after {
content: '\f00c';
}
I appreciate your help!
Use it like shown below.
Add "fa" class on i tag and move the CSS from i:after tag to i tag
.smart-form .checkbox input+i {
font-family: "Font Awesome 5 Pro";
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.smart-form .checkbox input+i:after {
content: '\f00c';
}
.smart-form .checkbox input:checked:hover+i:after {
content: '\f00d';
}
.smart-form .checkbox input:checked:disabled:hover+i:after {
content: '\f00c';
}
<script src="https://kit.fontawesome.com/ff81d4d106.js"></script>
<section class="smart-form">
<label class="checkbox">
<input type="checkbox" name="remember" checked (click)="doCheckbox()">
<i class="fa"></i>Stay signed in</label>
</section>
Related
I have a bit problem to link vue.js and scss.
I have this AppHeader.vue archive:
<template>
<header id="header" class="header">
<div class="header-container container">
<nav>
<a class="btn-icon logo-btn" href="/">
<img
class="logo logo-normal"
src="../assets/logo.svg"
alt="Logo petinder"
/>
<img
class="logo logo-white"
src="../assets/logo_white.svg"
alt="Logo petinder"
/>
</a>
<ul class="menu-links">
<li>Servicios</li>
</ul>
</nav>
</div>
</header>
</template>
<script>
export default {
name: "Header",
};
</script>
<style lang="scss">
.header {
background: $accent;
text-align: center;
padding: 10px;
}
.aright {
text-align: right;
}
I have another folder where I have four scss archives. One of them, _base.scss, has the css body like this:
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $text-color;
font-family: $font-family-sans-serif;
font-size: 16px;
max-width:100%;
overflow-x: hidden;
}
ul, li{
list-style: none;
padding:0;
margin: 0;
}
.app-container{
min-height: calc(100vh - 61px);
display: flex;
flex-direction: column;
//padding-top: 70px;
}
main{
height: 100%;
flex:1;
}
The problem is that css body is not working on the AppHeader.vue. When I see it on the webrowser, the body has no width.
How can I link them?
Thanks.
Another way to do this is by using this inside the style,
result: <style src='../style.css' scoped>
It's more useful because you can use scoped with this method.
best way for the link your css file to the vue component is the import your css to the App Header.vue component, like this
<style lang="scss">
#import "./path/_base.scss"; // please enter your current path
</style>
course sure that used of webpack in your project that help you for modular
How do you change the color of a fontawesome icon in nuxt? I gave the icon a class name and set the color: #444444" but it doesn't seem to work. The font-size property worked for the icon though.
<div class="icons">
<font-awesome-icon
:icon="['fab', 'github-square']"
class="icons__btn icons__github"
/>
<font-awesome-icon
:icon="['fab', 'twitter-square']"
class="icons__btn icons__twitter"
/>
</div>
.icons {
margin-bottom: 5rem;
&__btn {
margin-top: 2rem;
font-size: 5rem;
color: red;
}
&__twitter {
margin-left: 1rem;
}
}
You should check again whether your fontawesome module is loaded right, or check again whether your css code is compiled right.
I did a demo of use fontawesome in nuxt, hope it will help you.
I'm using Nuxt.js and Bulma. I'm making navigation using Bulma tabs(https://bulma.io/documentation/components/tabs/).
I wanna insert Bulma dropdown(https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable). But it doesn't work in middle of Tabs.
I know who wanna use Bulma dropdown needs to use javascript, so I use it. But it doesn't work.
How can i fix it?
To get a dropdown working inside Bulma's tabs, you need to adjust the overflow CSS in the tabs div. I'm not sure why I had to set overflow-x and overflow-y to get this working properly, but I did.
When the dropdown is active:
overflow-x : visible;
overflow-y : visible;
When the dropdown is not active, reset to their defaults:
overflow-y : hidden;
overflow-x : auto;
Yes you can with a little amount of fiddling
There are mainly 2 problems :-
Problem 1
As bulma tabs container is flexbox, and the list of tabs are child of this flexbox, the dropdown will not be visible as it overflows out of flexbox container.
If you add overflow-y:visible to tabs container div, scrolling will happen which is not the behaviour we need
Solution
To fix this, the contents to be shown on tab selection should also come inside the tabs container as second child, so that dropdown button/link in list of
tabs has the space to show the dropdown when clicked/hovered.
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#content-child {
flex-grow: 1;
width: 100%
}
#list-child {
flex-grow: 0; //should be set to 0 as it will take up vertical space (it is set to 1 in bulma)
width: 100%;
}
Problem 2
When dropdown is used within bulma tabs, the anchor tags in dropdown gets styled by those specified for anchor tags in tabs.This is one of the main issue.
The dropdown shown thus will be styled very differently.
Solution
Bulma dropdown also allows us to insert div inside.
We can make use of this to overcome problem 1.
Just add this css for divs inside dropdown so as to make it behave like links.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
Complete solution can be seen below and you can change as required for your use case.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
#content-child {
flex-grow: 1;
width: 100%
}
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#list-child {
flex-grow: 0;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" rel="stylesheet" />
<div class="tabs is-boxed" id="tab-container">
<ul id="list-child">
<li><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
<li class="dropdown is-active">
<div class="dropdown-trigger">
<a class="has-text-right custom-padding" aria-haspopup="true" aria-controls="dropdown-menu">
Drop Down
</a>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">Dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<div class=" dropdown-item is-active">Active dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<hr class="dropdown-divider" />
<div class=" dropdown-item">With a divider</div>
</div>
</div>
</li>
</ul>
<div id="content-child">
content
</div>
</div>
My sticky footer with my fontawesome icons is displaying perfectly in all browsers, but in Safari, the links aren't working.
Here is my code:
<style>
h4 {
font-size: 1em;
color: #A0A0A0;
bottom: 15px;
position: relative;
letter-spacing: 10px;
}
.footer{
position: fixed;
left:0px;
width: 100%;
bottom: 0px;
height: 20px;
background: #404040;
padding-bottom: 25px;
opacity:0.95;
}
</style>
......
<div class="footer">
<h4>
<a href="https://twitter.com/">
<i class="icon-twitter icon-2x"></i> </a>
<a href="https://www.facebook.com/">
<i class="icon-facebook icon-2x"></i></a>
<a href="http://wordpress.com/">
<i class="icon-rss icon-2x"></i></a>
</h4>
</div>
Can anyone tell me why this doesn't work in safari? And how to fix it?
I just into this problem. I believe this is caused by safari giving the target no dimensions (i.e. 0px x 0px). If you force inline-block on the <i> element it should to work correctly.
Had the same problem.
I added to the icon's class
display:inline-block;
and it worked fine!
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.