当前位置： 文江博客话题详情

我正在尝试在navbar中使用font Awesome It效率

发布于 2025-02-08 02:31:46 字数 10629 浏览 1 评论 0原文

我尝试使用字体很棒在Navbar上显示，但没有显示。我使用的方法是 安装npm安装字体 - 醒目-Save 然后在public/stylesheets中创建style.css文件。 设置文件包含代码@import url（'../ node_modules/font-awesome/css/font-awesome.min.css'）;从node_modules 然后，我在style.css文件 boilerplate.ejs。 然后我将想要的字体放在navbar.ejs。上 并在homev2.ejs上显示它，

但我知道为什么行不通。你能帮助我吗？

这是代码

homev2.ejs

<% layout('layouts/boilerplate')%>

navbar.ejs

<nav class="navbar sticky-top navbar-expand-lg navbar-dark " style="background-color: #0F293B;">
    <div class="container container-fluid">
      <a href="" class="navbar-brand"></a>
      <a class="navbar-brand" href="#">
        <img src="/image/assets/img/first_logo.png" alt="" width="100" >
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/dharmas">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Pages</a>
          </li>

          <i class="fa-solid fa-magnifying-glass"></i>

        </ul>
        <!-- <div class="navbar-nav ms-auto">
          <% if(!currentUser) {%>
          <a class="nav-link text-white" href="/login">เข้าสู่ระบบ</a>
          <% } else {%>
          <a class="nav-link text-white" href="/logout">ออกจากระบบ</a>
          <% } %>
        </div> -->
      </div>
    </div>
  </nav>

breerplate.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ศูนย์ดำรงธรรม</title>
    
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        
        <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
        
        <link rel="stylesheet" href="/stylesheets/app.css">
        <link rel="stylesheet" href="/stylesheets/appConsultation.css">
        <link rel="stylesheet" href="/stylesheets/appDharma.css">
        <link rel="stylesheet" href="/stylesheets/style.css">
        
    </head>

<body class="d-flex flex-column vh-100">
    <%- include('../partials/navbar') %>
    <main class="container mt-5">
        <%- include('../partials/flash') %>
        <%- body %>
    </main>
    <%- include('../partials/footer') %>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> -->

    <script src="/javascripts/validateForms.js"></script>
</body>
</html>

style.css

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

app.js

if (process.env.NODE_ENV !== "production") {
    require('dotenv').config();
}

const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const ejsMate = require('ejs-mate');
const session = require('express-session');
const flash = require('connect-flash');
const ExpressError = require('./utils/ExpressError');
const methodOverride = require('method-override');
const passport = require('passport');
const LocalStrategy = require('passport-local');
const User = require('./models/user');
const helmet = require('helmet');
const moment = require('moment');

const config = require('config');

const mongoSanitize = require('express-mongo-sanitize');

const userRoutes = require('./routes/users');
const campgroundRoutes = require('./routes/campgrounds');
const reviewRoutes = require('./routes/reviews');
const dharmaRoutes = require('./routes/dharmas');
const reviewofdharmaRoutes = require('./routes/reviewofdharmas');
const consultationRoutes = require('./routes/consultations');
const reviewofconsultationRoutes = require('./routes/reviewofconsultations');
const articleRouter = require('./routes/articles');
const article = require('./models/article');
const dbConfig = config.get('DHARMA.dbConfig.dbName');


const MongoDBStore = require("connect-mongo")(session);

const dbUrl = process.env.DB_URL

mongoose.connect(dbConfig, {
    useNewUrlParser: true,
    useUnifiedTopology: true
    // useFindAndModify: false
});

const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", () => {
    console.log("Database connected");
})

const app = express();

app.locals.moment = require('moment');
moment.locale('th');

app.engine('ejs', ejsMate);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))

app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(mongoSanitize({
    replaceWith: '_'
  }))

const secret = process.env.SECRET || 'thisshouldbeabettersecret!';

const store = new MongoDBStore({
    adapter: 'connect-mongo',
    url: dbConfig,
    secret,
    touchAfter: 24 * 60 * 60
});

store.on("error", function (e) {
    console.log("SESSION STORE ERROR", e)
})

const sessionConfig = {
    store,
    name: 'session',
    secret,
    resave: false,
    saveUninitialized: true,
    cookie: {
        httpOnly: true,
        // secure: true,
        expires: Date.now() + 1000 * 60 * 60 * 24 * 7,
        maxAge: 1000 * 60 * 60 * 24 * 7
    }
}
 
app.use(session(sessionConfig));
app.use(flash());
// app.use(helmet());
app.use(helmet.contentSecurityPolicy(false))


const scriptSrcUrls = [
    "https://stackpath.bootstrapcdn.com/",
    "https://api.tiles.mapbox.com/",
    "https://api.mapbox.com/",
    "https://kit.fontawesome.com/",
    "https://cdnjs.cloudflare.com/",
    "https://cdn.jsdelivr.net",
];
const styleSrcUrls = [
    "https://kit-free.fontawesome.com/",
    "https://stackpath.bootstrapcdn.com/",
    "https://api.mapbox.com/",
    "https://api.tiles.mapbox.com/",
    "https://fonts.googleapis.com/",
    "https://use.fontawesome.com/",
    "https://cdn.jsdelivr.net/",
];

const connectSrcUrls = [
    "https://api.mapbox.com/",
    "https://a.tiles.mapbox.com/",
    "https://b.tiles.mapbox.com/",
    "https://events.mapbox.com/",
];
const fontSrcUrls = [];
app.use(
    helmet.contentSecurityPolicy({
        directives: {
            defaultSrc: [],
            connectSrc: ["'self'", ...connectSrcUrls],
            scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls],
            styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls],
            workerSrc: ["'self'", "blob:"],
            objectSrc: [],
            imgSrc: [
                "'self'",
                "blob:",
                "data:",
                "https://res.cloudinary.com/ditv5cx1f/", //SHOULD MATCH YOUR CLOUDINARY ACCOUNT! 
                "https://images.unsplash.com/",
            ],
            fontSrc: ["'self'", ...fontSrcUrls],
        },
    })
);

app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser())
passport.deserializeUser(User.deserializeUser());

app.use((req, res, next) => {
    console.log(req.query);
    res.locals.currentUser = req.user;
    res.locals.success = req.flash('success');
    res.locals.error = req.flash('error');
    res.locals.infoDharma = req.flash('infoDharma');
    res.locals.infoConsultation = req.flash('infoConsultation')
    next();
})

// app.use(express.urlencoded({ extended: false }))

app.use('/', userRoutes);
app.use('/campgrounds', campgroundRoutes)
app.use('/campgrounds/:id/reviews', reviewRoutes)
app.use('/consultations', consultationRoutes)
app.use('/consultations/:id/reviews', reviewofconsultationRoutes)
app.use('/articles', articleRouter)
app.use('/', dharmaRoutes)
app.use('/:id/reviews', reviewofdharmaRoutes)

app.all('*', (req, res, next) => {
    next(new ExpressError('Page Not Found', 404))
})

app.use((err, req, res, next) => {
    const { statusCode = 500 } = err;
    if (!err.message) err.message = 'Oh No, Something Went Wrong!'
    res.status(statusCode).render('error', { err })
})

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`Serving on port ${port}`)
})
原文

I've tried to use font awesome to show on the navbar but it doesn't show. The method I use is
install npm install font-awesome --save
Then create a style.css file in public/stylesheets.
The setup file contains the code @import url('../node_modules/font-awesome/css/font-awesome.min.css'); Retrieve many forms from node_modules
Then I run the style.css file at boilerplate.ejs.
And then I put the font I want on navbar.ejs.
and show it at homeV2.ejs

But it doesn't work I know why. Can you help me?

this is the code

homeV2.ejs

<% layout('layouts/boilerplate')%>

navbar.ejs

<nav class="navbar sticky-top navbar-expand-lg navbar-dark " style="background-color: #0F293B;">
    <div class="container container-fluid">
      <a href="" class="navbar-brand"></a>
      <a class="navbar-brand" href="#">
        <img src="/image/assets/img/first_logo.png" alt="" width="100" >
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/dharmas">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/consultations">Pages</a>
          </li>

          <i class="fa-solid fa-magnifying-glass"></i>

        </ul>
        <!-- <div class="navbar-nav ms-auto">
          <% if(!currentUser) {%>
          <a class="nav-link text-white" href="/login">เข้าสู่ระบบ</a>
          <% } else {%>
          <a class="nav-link text-white" href="/logout">ออกจากระบบ</a>
          <% } %>
        </div> -->
      </div>
    </div>
  </nav>

boilerplate.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ศูนย์ดำรงธรรม</title>
    
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        
        <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
        
        <link rel="stylesheet" href="/stylesheets/app.css">
        <link rel="stylesheet" href="/stylesheets/appConsultation.css">
        <link rel="stylesheet" href="/stylesheets/appDharma.css">
        <link rel="stylesheet" href="/stylesheets/style.css">
        
    </head>

<body class="d-flex flex-column vh-100">
    <%- include('../partials/navbar') %>
    <main class="container mt-5">
        <%- include('../partials/flash') %>
        <%- body %>
    </main>
    <%- include('../partials/footer') %>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> -->

    <script src="/javascripts/validateForms.js"></script>
</body>
</html>

style.css

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

app.js

if (process.env.NODE_ENV !== "production") {
    require('dotenv').config();
}

const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const ejsMate = require('ejs-mate');
const session = require('express-session');
const flash = require('connect-flash');
const ExpressError = require('./utils/ExpressError');
const methodOverride = require('method-override');
const passport = require('passport');
const LocalStrategy = require('passport-local');
const User = require('./models/user');
const helmet = require('helmet');
const moment = require('moment');

const config = require('config');

const mongoSanitize = require('express-mongo-sanitize');

const userRoutes = require('./routes/users');
const campgroundRoutes = require('./routes/campgrounds');
const reviewRoutes = require('./routes/reviews');
const dharmaRoutes = require('./routes/dharmas');
const reviewofdharmaRoutes = require('./routes/reviewofdharmas');
const consultationRoutes = require('./routes/consultations');
const reviewofconsultationRoutes = require('./routes/reviewofconsultations');
const articleRouter = require('./routes/articles');
const article = require('./models/article');
const dbConfig = config.get('DHARMA.dbConfig.dbName');


const MongoDBStore = require("connect-mongo")(session);

const dbUrl = process.env.DB_URL

mongoose.connect(dbConfig, {
    useNewUrlParser: true,
    useUnifiedTopology: true
    // useFindAndModify: false
});

const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", () => {
    console.log("Database connected");
})

const app = express();

app.locals.moment = require('moment');
moment.locale('th');

app.engine('ejs', ejsMate);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))

app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(mongoSanitize({
    replaceWith: '_'
  }))

const secret = process.env.SECRET || 'thisshouldbeabettersecret!';

const store = new MongoDBStore({
    adapter: 'connect-mongo',
    url: dbConfig,
    secret,
    touchAfter: 24 * 60 * 60
});

store.on("error", function (e) {
    console.log("SESSION STORE ERROR", e)
})

const sessionConfig = {
    store,
    name: 'session',
    secret,
    resave: false,
    saveUninitialized: true,
    cookie: {
        httpOnly: true,
        // secure: true,
        expires: Date.now() + 1000 * 60 * 60 * 24 * 7,
        maxAge: 1000 * 60 * 60 * 24 * 7
    }
}
 
app.use(session(sessionConfig));
app.use(flash());
// app.use(helmet());
app.use(helmet.contentSecurityPolicy(false))


const scriptSrcUrls = [
    "https://stackpath.bootstrapcdn.com/",
    "https://api.tiles.mapbox.com/",
    "https://api.mapbox.com/",
    "https://kit.fontawesome.com/",
    "https://cdnjs.cloudflare.com/",
    "https://cdn.jsdelivr.net",
];
const styleSrcUrls = [
    "https://kit-free.fontawesome.com/",
    "https://stackpath.bootstrapcdn.com/",
    "https://api.mapbox.com/",
    "https://api.tiles.mapbox.com/",
    "https://fonts.googleapis.com/",
    "https://use.fontawesome.com/",
    "https://cdn.jsdelivr.net/",
];

const connectSrcUrls = [
    "https://api.mapbox.com/",
    "https://a.tiles.mapbox.com/",
    "https://b.tiles.mapbox.com/",
    "https://events.mapbox.com/",
];
const fontSrcUrls = [];
app.use(
    helmet.contentSecurityPolicy({
        directives: {
            defaultSrc: [],
            connectSrc: ["'self'", ...connectSrcUrls],
            scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls],
            styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls],
            workerSrc: ["'self'", "blob:"],
            objectSrc: [],
            imgSrc: [
                "'self'",
                "blob:",
                "data:",
                "https://res.cloudinary.com/ditv5cx1f/", //SHOULD MATCH YOUR CLOUDINARY ACCOUNT! 
                "https://images.unsplash.com/",
            ],
            fontSrc: ["'self'", ...fontSrcUrls],
        },
    })
);

app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser())
passport.deserializeUser(User.deserializeUser());

app.use((req, res, next) => {
    console.log(req.query);
    res.locals.currentUser = req.user;
    res.locals.success = req.flash('success');
    res.locals.error = req.flash('error');
    res.locals.infoDharma = req.flash('infoDharma');
    res.locals.infoConsultation = req.flash('infoConsultation')
    next();
})

// app.use(express.urlencoded({ extended: false }))

app.use('/', userRoutes);
app.use('/campgrounds', campgroundRoutes)
app.use('/campgrounds/:id/reviews', reviewRoutes)
app.use('/consultations', consultationRoutes)
app.use('/consultations/:id/reviews', reviewofconsultationRoutes)
app.use('/articles', articleRouter)
app.use('/', dharmaRoutes)
app.use('/:id/reviews', reviewofdharmaRoutes)

app.all('*', (req, res, next) => {
    next(new ExpressError('Page Not Found', 404))
})

app.use((err, req, res, next) => {
    const { statusCode = 500 } = err;
    if (!err.message) err.message = 'Oh No, Something Went Wrong!'
    res.status(statusCode).render('error', { err })
})

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`Serving on port ${port}`)
})

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

吃素的狼

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文