I have a nuxtjs static web app I have hosted on Netlify. This web has the following config
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'client',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Customize the progress-bar color
loading: { color: '#fff' },
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['~/assets/scss/main.scss', '@fortawesome/fontawesome-svg-core/styles.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module',
// https://go.nuxtjs.dev/stylelint
'@nuxtjs/stylelint-module',
[
'@nuxtjs/fontawesome',
{
css: true,
icons: {
solid: [
'faAngleLeft',
'faAngleRight',
'faChartLine',
'faCheckCircle',
'faCog',
'faLink',
'faPaintBrush',
'faUserGraduate',
],
brands: ['faApple', 'faGoogle'],
},
},
],
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/buefy
[
'nuxt-buefy',
{
defaultIconPack: 'fas',
defaultIconComponent: 'FontAwesomeIcon',
materialDesignIcons: 'false',
defaultIconPrev: 'angle-left',
defaultIconNext: 'angle-right'
},
],
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: '/',
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
target: 'static',
}
The following packages are installed
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"nuxt-buefy": "^0.4.13",
"sass-loader": "10.1.1",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.16.3",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@nuxtjs/eslint-config": "^8.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/fontawesome": "^1.1.2",
"@nuxtjs/stylelint-module": "^4.1.0",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-vue": "^8.2.0",
"postcss-html": "^1.3.0",
"prettier": "^2.5.1",
"sass": "^1.53.0",
"sass-loader": "10.1.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0"
} ...
The problem is that on any iPhone the font awesome icons on any buefy component fill the screen. Am I doing something wrong? or is there a bug with nuxt-buefy or even font awesome? In this project I am using nuxtjs, font-awesome, nuxt-buefy, and sass
I have tried different configurations, and I even went to the extent of creating a plugin. If you need anymore information from me, just let me know. Thank you for your time.
What I have found so far:
As of right now, I will be using MDI until this issue is resolved. MDI renders perfectly fine ✌🏼
This case is not font-awesome-icon error. I had this problem too, I removed this one, and it worked for me. you can try. The part I commented was the part that caused the error.
html {
overflow-x: hidden;
//font-size: 62.5%;
//font-size-adjust: 100;
//-ms-text-size-adjust: 100%;
//-webkit-text-size-adjust: 100%;
}