I would like to display the hidden button content in my card when hovering over it. I am currently attempting to use the adjacent sibling selector to do this, by connecting a hover element (the card) to another element (the hidden button) to achieve this. The code is is as follows
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div class="card-white">
<div class="secret-button">
<img src="images/approve.svg" id="i">Hidden button
</div>
<img src="images/chococake2.jpg"
style="width: 245px; height: 191px;"
/>
<h3>Recipe</h3>
<h4>German Chocolate Cake</h4>
<p>5/5</p>
<p>reviews</p>
<p>make it again</p>
</div>
</div>
My hidden button is currently set as display none on my css purposely, but I would like to then make it visible by doing the below
.card-white:hover{
background-color: #8C8C8C;
border: 5px solid green;
text-decoration: none;
}
.secret-button{
display: none;
}
.card-white:hover + .secret-button{
display: block;
}
The issue is that despite my attempt above, this is not changing my html page. The plus button appears as orange on my sublime text, which suggests to me it does not like or recognize the selector as valid css code for some reason.
I think the main problem is that I may need to restructure the html/css as these two elements may not be proper siblings, but just want to know how best to go about this.
I have a React component that dynamically applies a CSS style class using the onClick listener. This works and when I view the generated html in the browser inspector I can see my desired output.
<div class="RecipeSection_recipe-section__Asce8 active">
<h2>Ingredients</h2>
</div>
However the styling I have defined in my React CSS Module is not applied
.recipe-section.active h2 {
text-align: center;
color: red;
}
When I remove the .active class I can see the red styling applied.
I guess because the React CSS Module adds a hash to the name it is impacting the class concatenation, but I am not sure if there is a way to resolve this within the React CSS module?
The reason the style wasn't being applied is because I had supplied the css 'active' class as a string value rather than as a reference from the imported CSS module:
import classes from "./RecipeSection.module.css";
Then I could supply the reference:
${classes.active}
The real clue was that in the initial generated html, my active class had not been allocated a hash as the recipe-section class had
<div class="RecipeSection_recipe-section__Asce8 active">
I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in Vue.js?
<template>
<header class="nav">
<img src={Logo} alt="24G Logo">
</header>
</template>
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header'
}
</script>
<style lang="scss" scoped>
</style>
Here are three options. The best in my opinion is the third:
Simply input src like in any webpage <img src='../path/to/file.svg' ... though that come with some drawbacks (regardless if it's :src='logoPath' where logoPath is variable containing the same. For a short overview see this stack answer, and for more details see this article from css tricks.
Check out svg-vue-loader. Vue won't automatically import svg without a loader.
Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:
<template>
<header class="nav">
<svg ....
</header>
</template>
If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.
No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.
// in MainLogo.vue
<template>
<svg ....
</template>
// in MainHeader.vue
<template>
<header class="nav">
<MainLogo>
</header>
</template>
<script>
import MainLogo from '../path/to/file.vue'
export default {
components: { MainLogo }
}
</script>
Cheers
After searching and searching, and seeing all the answers were old, I went ahead and tried the newish v-html prop.
The result, success!
<div v-html="avatar" style="width: 100%"></div>
The avatar is a full element that I stored in the database.
No loaders, no imports, just using the built in resources of Vue.js
If you leave out the style, then the svg will not show.
Also, loading the full element enables me to attach a ref prop to the element. Enabling me to access the svg through script.
Hope that helps someone!!
I used this with avataaar's random avatar generator and stored the resulting svg to the database (mongo)
Here is another approach that I used:
<template>
<a href="#"
class="log-link-css-class">
<!-- SVG Icon Start-->
<img alt="alt message" class="your-logo-css-class"
src="#/assets/images/logofilename.svg">
<!-- <SVG Icon End /> -->
</a>
</template>
No import required. Vue automatically converts it to the unique URL.
edit your code
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header',
data(){
Logo: Logo
}
}
I'm using font awesome and have imported it in index.js
import '././styles/fontawesome/css/fontawesome.min.css';
following in filter component
<span onClick={this.togglem.bind(this)}>
{/*<span className="rTitle">Filters</span>*/}
<i className="fa fa-filter" aria-hidden="true"></i>
</span>
Here, the icon fa-filter is not getting displayed can anyone lemme know whats going wrong
Using double dots its throws this exception:
You attempted to import
../../../styles/fontawesome/css/fontawesome.min.css which falls outside of the project src/ directory. Relative imports outside of
src/ are not supported.
structure is
src/filter.js
src/styles/fontawesome
version -5.5.0
i've imported in filter pointings are all right it show the css styles
when inspected but does not show the icon
Your import looks wrong import '././styles/fontawesome/css/fontawesome.min.css'; you're probably looking for import '../../styles/fontawesome/css/fontawesome.min.css'; (pay attention to the dots).
If you're using React with JSX (you're most likely doing it) you need to use className to define html class attribute:
<i className="fa fa-filter" aria-hidden="true"></i>
Also, the right way to use FontAwesome in React in documented here: https://fontawesome.com/how-to-use/on-the-web/using-with/react
I started to use Angular Material in my project and I was wondering how I can change the svg color inside an am-button.
This is my code:
<md-button class="md-fab md-primary">
<md-icon
class="ng-scope ng-isolate-scope md-default-theme"
style="height: 14px; width: 14px;"
md-svg-src="img/material-icons/core/arrow-forward.svg"
></md-icon>
</md-button>
What do I need to add to change the color of the svg from the curent black to white, just like in Google's button demo? (section "Icon button using Font-icons")
I'm on angular-material 0.8, and I simply added
style="color:white;font:bold;"
to the md-icon element.
For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x.
I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.
After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.
The SVG is under the md-icon, so you could add this to your style:
md-icon {
color: red
}
md-icon svg {
fill: inherit;
}
The following is the only way I've gotten it to work via stylesheets.
md-icon {
svg {
path {
fill: #ffffff;
}
}
}
Am using this in the CSS :
.my-icon svg
{
fill : #fff;
}
And in the HTML :
<ng-md-icon icon="search" class="my-icon"></ng-md-icon>
Works fine!
You should be able to do this by add "fill:white" to the style of the icon.
<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>
Add this to your css:
svg {
fill: inherit;
}
The svg will now inherit the fill attribute of your md-icon
<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>
I was having a similar problem when trying to change default svg icon color. For those who are experiencing the similar issue, make sure you check the angular-material version you're currently using. Currently, I'm using the angular-material "0.7.1" and this is quietly important.
NOTE: with my current Angular-material (0.7.1) version, the <mdIcon></mdIcon> directive only checks to see if attr.Icon is defined or not during postLinking compileFunction. With this implementation, in order to reference your svg icon files, you simply add icon attribute to your <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> element directive. Notice in the earlier angular-material version, you might have use md-src-svg for referencing your svg files, its no longer the case in 0.7.1 version.
So if you were using 0.7.1 and following above instruction, you should have your svg icon rendering correctly, now its time to change the background-color of the svg you're using.
Raw svg file before any modification:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24">
<g>
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>
You should have a folder within your project where you save all your svg icons, in my case, I have a folder named icons where I store all my svg icons. The example svg file above is the non-modified svg icon where I got it from https://github.com/google/material-design-icons. (Default its rendering as a black svg file)
To change the default svg file, you would simple add a fill attribute to your raw svg file. See modified svg file version:
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />
I simply added fill="green" the path element svg file, and now my svg icon is rendering as color green instead of default black. I know some of you guys might be using a different version of angular-material, but the mechanism of changing default svg color should apply the same. Hopefully this can be helpful to solve your problems, thanks!
The issue seems to be with the downloaded SVGs from Google Design icons as they override the fill attribute in the svg root. Compare the view source of SVGs on Google Design with the ones used in the example.
Solution:: Override fill in css.
md-icon svg {
fill: currentColor;
}
One way to do it is by setting a custom class selector.
HTML:
<md-button class="md-fab mybtnstyle">
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>
CSS:
.md-button.md-fab.mybtnstyle {
background-color: blue;
}
.md-button.md-fab.mybtnstyle:hover {
background-color: red;
}
Codepen here: http://codepen.io/anon/pen/pjxxgx
Easiest way out
Now there's no need to change the svg or the fill property.
Simply add the !important to md-icon's color property in CSS:
md-icon {
color: #FFF !important;
}
I was having a similar problem, I needed to change the SVG color using CSS, but I also needed to keep the original SVG color (e.g. fill="#fff") when no CSS was supplied.
I enhanced Jason Aunkst's approach to make it work. Here's the solution:
md-icon[style*="color:"] svg [fill] {
fill: inherit;
}
That class will set any svg's child element with a fill attribute to inherit the color value as long as the svg is a child of an md-icon element that contains the style attribute with a color value.
It will only work on SVG's that are only using one fill color though. Adjust as needed, hope it helps!