font-awesome

Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out: :host { all: initial; /* 1st rule so subsequent properties are reset. */ display: block; contain: content; /* Boom. CSS containment FTW. */ } I'm able to use other stylesheets by just inlining them within the :host property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet. I found this post and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in my example . I had the same issue with StencilJS.

I am trying to use font-awesome icons as a placeholder in search input field. Jsfiddle examples I use corresponding html entity as a placeholder, then use pseudo class to style placeholder with correct font-family (example 2 in jsfiddle): HTML: <div class="wrapper"> <input class="icon" type="text" placeholder="" /> </div> CSS: .wrapper { font-family:'arial', sans-serif; } input.icon { padding:5px; } input.icon::-webkit-input-placeholder { font-family:'FontAwesome'; } input.icon::-moz-placeholder { font-family:'FontAwesome'; } input.icon::-ms-input-placeholder { font-family:'FontAwesome'; } It

I'm trying to create a responsive feature to my website. Basicly what I want is to have font awesome icons for navigation, but when on computer if you hover the mouse over the icon, it changes into a word. I've tried it via CSS, using a:content:"" and then a:hover:content:"" I have never tried something like this before and I'd appreciate it if anybody could point out what I have to do to get it working. Here's a JSFiddle i { color: #fff; } i { padding: 0 10px; } ul { list-style-type: none; } .nav ul { margin: 0; padding: 0; position: absolute; top: 0; right: 0; font-size: 0px; } .nav ul li {

I want to use a font awesome icon as Google Maps marker. Here is my code: function addMarker(marker) { marker1 = new google.maps.Marker({ position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng), category: obj.status, map: map, icon: // Font Awesome icon here }); I've looked at this question, but unfortunately this is not working properly for me. I was wondering if there's another way to do this. disprog Yes, there is. You can use RichMarker Example: function addMarker(marker) { marker1 = new RichMarker({ position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng), category: obj.status, map:

This question already has an answer here: How to configure webpack to load glyphicons/font-awesome icons in React 1 answer Trying to load font-awesome with webpack gives me this error: ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. I'm trying to import font-awesome in a React component like this: import "font-awesome/scss/font-awesome.scss"; Here's what my webpack.config.js looks like. I wanted to

I am using font-awesome 4.70, angular 6.0.8, and cli 6.0.8(full versioning below) I am trying to replace our existing webpack process with the cli's "ng build". I have run into an issue with font awesome's icons not showing up. I have seen similar issues in the past with older versions but I havent found a solution yet. I have the fonts hooked up in my assets assets:[ "./node_modules/font-awesome/fonts", //other assets ] And I am including the css in the styles portion of my angula.json styles:[ "./node_modules/font-awesome/css/font-awesome.css", //other styles ] I am not using "ng serve", I