I have this defined in my app.scss
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
font-weight: 900;
}
and am trying to use an icon like this
<Button class="btn fas" text=""></Button>
in my app. which renders as
from my reading this should work, but I am obviously missing some config item.
Any ideas what I could be missing?
I've had more luck using the following format of the code when using icon fonts.
const icon = String.fromCharCode(0xf095);
<Button class="btn fas" [text]="icon"></Button>
Related
I took time learning how to theme bootstrap using SASS. Steps were as follows:
In my project directory at command line ran npm install bootstrap --save
Then I wrote to main.scss file with
$theme-colors: (
"primary": #9b2335,
"secondary": #696969,
"success": #d9596c,
"info": #d02f47,
"warning": #e38291,
"danger":#de6e7e,
"light": #d9d9d9,
"dark": #333333
);
#import "node_modules/bootstrap/scss/bootstrap";
At command line ran sass main.scss main.css
And with that I would expect ALL theme colors to be overwritten. Please note, all of my custom $theme-color variables are a hue in either the red or gray family. Nothing about those color values is blue. However, the border around my navbar toggle button is blue when focused (see pic). Why did it not change to one of my custom theme colors? I did look through _variables.scss but nothing obvious jumped out at me.
The html for my page was copied from the bootstrap album example, but the important part I think is this:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
What Sass am I missing here to override ALL colors?
that's the default bootstrap focus color from ("_reboot.scss"):
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
if you want to set a color from your theme you have to override it. f.e.:
button:focus {
outline: 5px auto map-get($theme-colors, "primary");
}
I'm just not succeeding in using FontAwesome icons in my Nativescript-Vue app. If I just want to use a regular icon, it works fine:
<Label col="0" text.decode="" class="fa"></Label>
But when I want a Solid (or I suppose any of the others), no love.
<Label col="0" text.decode="" class="fa fas"></Label>
I've looked at so many instructions now that my eyes are crossed.
Today I upgraded to v5. But I don't thing I was able to get the solid ones to work before.
I work with Nativescript-Vue and I use Nathan Walker plugin nativescript-fonticon. It works very fine with FontAwesome 5.
It's very easy to use.
Install the plugin:
npm install nativescript-fonticon --save
Place font icon .ttf files in app/fonts
fa-brands-400.ttf
fa-regular-400.ttf
fa-solid-900.ttf
Create base class (my css file is placed in assets/scss/global.scss):
.fa,
.far {
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
font-weight: 900;
}
.fab {
font-family: 'Font Awesome 5 Free', 'fa-brands-400';
font-weight: 400;
}
Copy css to app somewhere. I place my files in assets\css folder (I use minified format):
assets/css/all.min.css
assets/css/brands.min.css
assets/css/fontawesome.min.css
assets/css/regular.min.css
assets/css/solid.min.css
Add and load the plugin in main.js
import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
// Load TNSFonticon
TNSFontIcon.debug = true
TNSFontIcon.paths = {
fa: './assets/css/fontawesome.min.css',
far: './assets/css/regular.min.css',
fas: './assets/css/solid.min.css',
fab: './assets/css/brand.min.css'
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
Use the component in your code:
<Label class="fas" text="fa-chess-knight | fonticon"></Label>
Nothing I tried from the V5 instructions seemed to work. (Maybe someone can write explicit instructions for using in Nativescript-Vue.)
But, falling back to the old way, the simple
<Label col="0" text.decode="" class="fas"></Label>
with
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
And, I must have somehow been interupted when I first set this up, because fa-solid-900 was not actually in my [app.fonts][1] folder. :-|
Not sure what all those fancy new packages I installed will do now.
Good day. I am working with vuetify, using the following v-dialog in a component:
<template>
<div>
<!--Indicador-->
<v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<cube-shadow class="spinnerRotate"></cube-shadow>
</v-layout>
</v-container>
</v-content>
</v-dialog>
<!-------------->
</div>
</template>
<style scoped>
.vdialognew {
box-shadow: none !important;
max-width: 610px !important;
}
</style>
As you will see in v-dialog I have added the vdialognew class, to apply those new styles, but when loading the content by checking in the browser console, I see that the vdialognew class does not apply to it, only. Similarly, if I use the style property inside the v-dialog tag, it does not work for me. How can I make such a change?
I am doing this modification to eliminate the box that is seen behind the green square:
Thank you very much in advance. Blessings
Passing "class" to the v-dialog won't work.
Use "content-class" instead. In your case
<v-dialog content-class="vdialognew" v-model="mostrarIndicator" persistent>
should work.
Have a look at the v-dialog docs
Use "content-class" is the correct answer as mentioned by #mxmass, but if you're trying to add the class in scoped level, it won't work.
Add the style in the beginning, so let's say if you're using nuxt, create a main styling file such as main.scss, then in nuxt.config.js, add that file in css section. That way, your styling class is available when you're using "content-class". Hope this helps.
you can add multiple names to class
<v-dialog class="vdialognew dialogCss"></v-dialog>
<style>
.dialogCss {
background: #8e5ba6;
}
</style>
I am working on an application in Ruby. It has 8 pages and on each one of the pages the general layout is bootstrap's .container . row .col-sm-6 .col-sm-6 layout. I have a btn-group in the 2nd col-sm-6 layout that looks great on lg, xl and s devices.
When the screen falls between 992px-768px the button group breaks in an unpleasant fashion
It adjust well when the columns shift one on top of the other on small screens 544px-768px and Breaks bad again on xs devices < 544px
.
I have found a nice solution where I make the btn-group vertical on xs screens by duplicating the code adding the btn-group-vertical to duplicated code and hiding this code until it detects an xs screen (then it hides the horizontal btn-group). However, this is a lot of duplicate code that I have to replicated on 8 pages and still doesn't solve for medium screens.
I thought about keeping my code cleaner by adding scss like this:
.myClass {
#media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
#media (min-width: 761px) {
&:extend(.btn-group all);
}
}
That I found on stack overflow question 31893581. It doesn't work even with the manipulations that I thought would work. I could follow the solution stated in that same post but I am uncertain how sanitary that would be etc.
If somebody has any advice for me on how to solve for a class that pulls in bootstrap classes at specific browser widths or a completely different solution to my problem, I am all ears.
Thanks in advance.
I can think of a number of ways to do this, here are two methods that are easy to picture:
https://codepen.io/panchroma/pen/XgojBL
Add a clearfix div at the point where you want the buttons to break, then use media queries to hide or show this div.
Another method instead of using a clearfix would be to target .btn-group in your CSS, and using media queries set a max-width at viewports 768 - 992 px.
Good luck!
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">first col</div>
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">btn-1</button>
<button type="button" class="btn btn-primary">btn-2</button>
<div class="cf"></div>
<button type="button" class="btn btn-primary">btn-3</button>
<button type="button" class="btn btn-primary">btn-4</button>
</div>
</div>
</div>
</div>
CSS
.btn-group .cf{
display:none;
}
#media (min-width: 768px) and (max-width: 992px) {
.btn-group .cf{
display:block;
}
}
my IE8 doesn't show images inner the figure tag.
TYPO3 Installation 6.1.x
DOCTYPE HTML5
css styled content (latest)
Frontend: Text & Image will shown as
<div class="csc-textpic-imagewrap">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img height="308" width="828" alt="" src="fileadmin/media/image.JPG">
</figure>
</div>
</div>
</div>
I 've included HTML5shiv Script - nothing happens .. then I tries to unwrap the figure element with jQuery - nothing happens
Has anyone an idea how I can show my image wrapped with
it was a responsive big
img {
max-width: auto;
width: 100%;
/* and for IE 8 */
width: auto\9;
}
That's it Damn.!
I had the same problem:
tt_content.image.20.rendering.singleNoCaption.singleStdWrap.wrap.override >
tt_content.image.20.rendering.noCaption.singleStdWrap.wrap.override >
Or instead of deleting it, replace it with whatever html you like.
just set this in config typoscript
doctype = html5