Connecting and using svg icons in css?

Question

css

Hello!
Question on the subject, more specifically how to declare style classes referring to the svg file:

@font-face {
    font-family: "Font Custom";
    font-style: normal;
    font-weight: 900;
    src: url("/static/fonts/font-custom.svg") format("svg");
}

.foobar {
    font-family: "Font Custom";
}

How to connect this or that figure from the svg file to the foobar class?
There is a glyph tag in the svg file with the glyph-name="align-center" attribute, for example, is it possible to refer to this name?

Answer 1

Everything came to me, the problem was that I did not mention that the whole thing was going on webpack, before that I used raw-loader for svg, in short, this rule solved my problem:

module: {
        rules: [
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                        publicPath: 'static/fonts/'
                    }
                }]
            },
        ]