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
Related
I have tried below code,
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
<i className="fa fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>
it shows icon fa-edit properly,
but when i try to use,
<i className="far fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>
it doesnt work,
as per website it is,
Try this:
<i className={`far fa-edit`} style={{fontSize:28,color:"#FC46AA"}}></i>
It is probably due to missing spaces between CSS classes (using string templates)
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 very new to reactjs. There is a third-party library called react-bootstrap that I want to use in my project. I installed it via yarn and when I want to use it's components, nothing happens! For example:
import { Button } from 'react-bootstrap'
<Button variant="success">Sign In</Button>
has no effect on a button. In elements I can see that the class assigned:
<button type="button" class="btn btn-success">Sign In</button>
but there isn't any effect in button!! What should I do?
If you need any clarification, simply ask for it. Thank you!
You need to add bootstrap.css, either by adding link in index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
or by importing in index.js file after installing bootstrap using yarn / npm.
import 'bootstrap/dist/css/bootstrap.min.css';
Demo
I am using UIKit 3 Beta in Meteor, ie with React. However my Slidenav icons
<a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></a>
are not showing. Do I need to import the components separately. If so how? Since I am working in Meteor UIkit is a node install. I do not see the components.
Please help.
The docs say:
React will work with data-uk-* prefixes only.
https://getuikit.com/docs/javascript#uikit-and-reactive-javascript-frameworks
Try to change your attributes:
<a href="#" data-uk-slidenav-previous></a>
<a href="#" data-uk-slidenav-next></a>
Can not find a clear way to use Bootstrap with Meteor-React combination. There are a number of packages in Atmosphere which expected to exposure global variable with consequent references to Bootstrap functionality, but after, for example,
meteor add universe:react-bootstrap
import BS from 'bootstrap';
system complaints that 'bootstrap' is not defined.
What I did now, I included CDNs for Bootstrap nd jQuery directly into my client's main.html, and got it working:
render() {
return (
<li>
{this.props.ad.text}
<button type="button" className="btn btn-default btn-lg">
<span className="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</li>
);
}
But it is not seems a good solution. jQuery is included in Meteor app by default, how to reference it? When I tried to add twbs:bootstrap package, it is also not clear how to include it in html. Simply added, it does not work.
To use React with Bootstrap, you should use this module react-bootstrap. It has been out there for sometimes and seems still good. I use it for some of my Meteor React projects, I have nothing to complain till now.