Leveraging font awesome ttf in conjunction with scss

I am currently attempting to incorporate Font Awesome with SCSS.

@font-face {
  font-family: 'awesome';
  src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf');
}

Although the path appears to be correct, I am encountering errors: Failed to compile.

./src/assets/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/main.scss) Module not found: Error: Can't resolve '../../fonts/font-awesome/fa-light-300.ttf' in 'C:\Users\idogo\Desktop\‏‏תיקיה חדשה\sprint-4\src\assets\styles'

Your assistance would be greatly appreciated, thank you

csssassfont-awesome

Answer №1

It turns out that all I had to do was add "~@" at the start of the path.

@font-face {
  font-family: 'awesome';
  src: url('~@/fonts/font-awesome/fa-light-300.ttf') format('ttf');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of CSS id selectors to customize the appearance of a Grid

In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...

c#asp.netcss

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

I came across this fantastic Bootstrap Pricing Slider that I found originally at Within my Bootstrap Pricing Slider, there is a "total amount" calculated after some math, resulting in a final score. The slider includes a "Process" button which currently ...

javascriptjquerycsspaypalpaypal-subscriptions

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation

Material UI drop down select position placement

Having an issue with the dropdown position when using select from material UI. It's not appearing in the correct location. Desired Dropdown Position: Current Dropdown Position: when opening the dropdown The dropdown is displaying in the center of ...

cssreactjsdrop-down-menumaterial-uijsx

Secret button concealed within a div, revealing only a helpful hint

On my website, there is a list of items where each item is represented by either a picture or a name enclosed in an <article> tag. Here is an example of how it looks: <article class="client-card"> <p><img width="211" height="106" ...

htmlcssstylesheet

Adjust the z-Index of the list item element

I am attempting to create an effect where, upon clicking an icon, its background (width and height) expands to 100% of the page. However, I am struggling with ensuring that the 'effect' goes underneath the this.element and above everything else. ...

javascriptjqueryhtmlcss

What is the best way to ensure the font size is responsive in Laravel's welcome.blaze.php file?

On a large screen, the word "LaravelProject" and its links have ample space which I prefer. A newly created Laravel project appears differently on a small screen. When replacing "Laravel" with "LaravelProject," the wor ...

cssvue.jsbootstrap-4

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

Creating a notification feature for an HTML application

I am in the process of creating an HTML app through intel XDK. While I understand that using HTML to build apps is not as common, it is the language I am most familiar with, along with CSS. One feature I would like to include in my app is a weekly notific ...

htmlioscssipadintel

Move the element from the center of the screen back to its starting position

Looking to craft a single animation that will transition elements from the center of the current view back to their original positions. Unfortunately, CSS animations do not support toggling the display property. This limitation causes the second rectangle ...

htmlcss

td having no line breaks causing text to extend beyond the cell

I have a challenge with using the nowrap property on td elements to ensure proper formatting of my tables. In the first table, everything wraps nicely, but in the second table, the content in the first "td" exceeds its designated space due to length. How c ...

htmlcsshtml-tableword-wrap

Switch out the image in the dropdown and update the button once it is selected

In this scenario, I am looking to dynamically change the image in a button dropdown when it is clicked. The goal is for the dropdown image to swap and replace with the actual one upon clicking. For reference, here's the fiddle: https://jsfiddle.net/32 ...

javascriptjquerycss

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?

When trying to add a scrollbar to the popup, I am facing an issue where the scrollbar does not appear when zoomed in to 75% or 100%. It works fine for fit screen but not on zoom. Can anyone help me identify what is wrong with my code and suggest how to han ...

javascripthtmlcss

Explanation: The information box does not appear when the mouse hovers over it

Welcome to the gallery showcasing a unique calendar design with tooltip functionality. This calendar features a special hover effect for New Year's Day on January 1st, displaying a tooltip text upon interaction. Feel free to explore the code below to ...

htmlcsshovertooltip

Prevent scrolling on both md-sidenav and md-content in AngularJS Material

Currently, I am working on a website using AngularJs Material sidenav. My goal is to make both md-sidenav and md-content appear as one page, without any scroll bars showing up when the height of one element exceeds that of the other. How can I achieve th ...

cssangularjsangularjs-material

Showing content in a single line causes it to drop down to the next

Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...

htmlcss

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

javascriptphpjqueryhtmlcss

Date Selector Tool for Input Field

Does anyone know how to change the color of the date picker that appears in certain browsers but is unsure about the selector's name? HTML: <form action="pledge.html" method="post"> <input type="date" id="birthday" name="user_bda ...

css

Customize Colors to Match Background in SASS

I want to design a dynamic tag component in Angular, where users can input a background color and have the font color automatically adjusted to either light or dark based on the specified color. Here's how my component is structured: <span class=& ...

angularsasscolorsbackground-color

Using the columns property in CSS3 along with background-color

My ul-element has multiple lis with a background color assigned to it. I am using the CSS3 columns property and everything is working well, but the background color of my ul is only visible in the first column. What could be causing this issue? Thank you ...

css