Bringing Fonts into VueJS with CSS Files

I have a Vue project and I am trying to incorporate the line-awesome font. However, when importing the CSS file containing the fonts in my App.vue component like this:

@import 'assets/fonts/line-awesome/css/line-awesome.min.css';

No errors are displayed, but the fonts do not seem to be loading in my application.

The CSS file contains the following font-face definition:

@font-face {
  font-family: "LineAwesome";
  src: url("../fonts/line-awesome.eot?v=1.1.");
  src: url("../fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"),
       url("../fonts/line-awesome.woff2?v=1.1.") format("woff2"),
       url("../fonts/line-awesome.woff?v=1.1.") format("woff"),
       url("../fonts/line-awesome.ttf?v=1.1.") format("truetype"),
       url("../fonts/line-awesome.svg?v=1.1.#fa") format("svg");
  font-weight: normal;
  font-style: normal;
}

I'm unsure if the issue lies in an incorrect path or if additional configuration is needed in my application.

Any suggestions on how to resolve this?

cssfontsvue.jsfont-facevue-component

Answer №1

To properly include your files, make sure to place them in the static directory and link to them like this:

@import '/staic/fonts/line-awesome/css/line-awesome.min.css';

It's important to note that files in the static/ directory are not processed by Webpack; they are simply copied to their final destination as-is, maintaining the same filename.

I encountered a significant issue with the line-awesome CSS and fonts. Even after loading them using a simple HTML site with the source CSS and fonts from this link, I noticed that it was displaying a box symbol instead of the intended icon.

Below is a sample code snippet that I used for testing purposes:

<html>
<head>
  <link rel="stylesheet" href="./la/css/line-awesome-font-awesome.css">
</head>
<body>
<i class="fa fa-file-word-o"></i>
</body>
</html>

The output I received looked like this:

However, when utilizing a CDN like the following, the issue might be resolved:

<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

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

Placing an exit button beside an image for easy navigation

Here is a snippet of my code: <style type="text/css"> .containerdiv { position:relative;width:100%;display:inline-block;} .image1 { position: absolute; top: 20px; left: 10px; } </style> <div class="containerdiv"> <ima ...

javascripthtmlcss

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...

htmlcsshtml-table

Navigation bar set to align in the center

I'm struggling to align the navigation bar I've designed in the center of the page. Here is the HTML Code: <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Mr. A</a& ...

htmlcsscenternav

What causes the width of input fields to increase as more inputs are added in flexbox?

I'm working on a form that consists of multiple sections, each with varying numbers of input fields. I've noticed that when I apply display: flex to the parent div and set the input fields to 100% width, the widths are calculated differently depe ...

htmlcssformsflexboxwidth

Interactive image showcase that flips on click to reveal accompanying text descriptions

I'm excited about creating a photo album/gallery for my family as my first project. I've made great progress so far - the layout is responsive, and each photo can flip individually. The only roadblock I'm facing is adding a back to the photo ...

javascripthtmlcss

Having difficulty linking a subclass in HTML with CSS

<div class="section-3"> <div class="section-3a"> <div class="section-3a(a)"> <p>light background color (header and sidebar)</p> </div> <div class="section-3a(b)"> <p>#FFFFFF</p> ...

htmlcss

Confirm that a new class has been assigned to an element

I'm having trouble creating a unit test for a Vue.js component where I need to check if a specific CSS class is added to the template. Below is the template code: <template> <div id="item-list" class="item-list"> <table id="item ...

typescriptvue.jsvuejs2vue-component

Is anyone else experiencing issues with getting their Bootstrap collapse button to work?

I'm facing an issue with the collapse-button in my bootstrap navbar not working, and I can't figure out why. Can someone please assist me in resolving this problem? Here is the code for my navbar: <div id="wrapper"> <div class="nav ...

jqueryhtmlcsstwitter-bootstrap

The CSS3 transition is not functioning correctly when transitioning element dimensions from a percentage or auto value to a specific pixel

As part of my project, I am developing a single-page website that features a vector graphic occupying 80% of the screen width on the initial 'start screen'. Once the user scrolls down, the graphic smoothly transitions into a navigation bar positi ...

csscss-transitions

"Exploring the method of exporting a function in Vue.js 3 using the Composition API

// Inside File2.vue <script> import { ref, computed } from 'vue'; let example = ref(1); const totalSum = computed(() => { let result = 5 + 5; return result; }); </script> <template> <div class="pa ...

vue.js

HTML generated in the header of a bootstrap-vue table

I'm currently developing a website using NuxtJS, Bootstrap Vue, and vue-i18n. Within the site, I have a table (<b-table>) that displays areas in square meters. The header of this table should show "sq m" in English and "m2" (m<sup>2</s ...

vue.jsnuxt.jsbootstrap-vuevue-i18n

Troubleshooting npm run watch in Laravel and Vue.js project

Currently, I am managing a Laravel project with a Vue.js frontend setup. Previously, running npm run watch would immediately reflect any changes I made. However, lately, the changes are not showing up as expected and I'm unsure of what is causing this ...

laravelvue.jsnpm

The width percentages of an image and a button are identical, yet they appear to have

In my HTML document, I noticed that the image tag and button tag both have a width of 40% in the style attribute. <!DOCTYPE html> <html> <head> </head> <body> <div style="display: flex; flex-direction: column;" ...

htmlcssflexbox

The v-model of one component causing interference with the v-model of another component

I am currently utilizing vue js alongside buefy and have implemented two components: a field-radiobox component and a field-textarea component. Within my post.cshtml page, I can choose an option from the radio buttons, and the selected value is appropriat ...

javascriptvue.jsvuejs2vue-component

What criteria does Vue use to determine which select option should be pre-selected when the app is initialized?

I recently came across this app on jsFiddle: https://jsfiddle.net/punter/ggatev5k/1/ , also shared here: <div id="app"> <select v-model="teamsSelected"> <option v-for="team in teams" :value="{id: team.id, name: team.name}">{{team.na ...

vue.js

Retrieve HTML content from Vuetify components without displaying it on the webpage

I have a project where I need to retrieve the HTML code from various Vuetify components. Instead of just as a HTML string, I actually need it as a DOM element that can be easily added to the body. This is necessary for me to be able to utilize these compon ...

javascripthtmlvue.jsdomvuetify.js

Modify the colors of multiple texts using a concise code block of fewer than 20 lines

I have 8 paragraphs and I want to toggle the class 'one-active' when clicking on each of them, while removing the active class from the others. I currently have the code working for two paragraphs, but it's too lengthy for all eight. How can ...

javascripthtmlcss

Transforming the Blade user profile into a sleek Vue interface for the Laravel-Vue project

They have requested me to convert all pages from blade to vuejs. I have begun the process with the user profile (Profile.vue), but I am unsure about how to execute PUT requests using Axios in this case. Can someone provide guidance on creating the code for ...

laravellaravel-5vue.jsvuejs2axios

Testing Vue with Jest - Unable to test the window.scrollTo function

Is there a way to improve test coverage for a simple scroll to element function using getBoundingClientRect and window.scrollTo? Currently, the Jest tests only provide 100% branch coverage, with all other areas at 0. Function that needs testing: export de ...

javascriptvue.jsjestjs

Adjust the dimensions of an SVG element using CSS within an li element's ::before pseudo-element

I'm working on a list where SVGs are loaded as list items. How can I adjust the height and width of the ::before pseudo-element to be 30px x 30px? Setting the height and width directly didn't work for me. Can someone assist with this? <div cl ...

htmlcss